Viewing a saved revision (read-only)
a029e039102147b99eb1e9c218571fb3
Fork of HTML Starter
This interactive 7-way Venn diagram visualizes 127 possible set intersections among sets A through G, with each region’s size proportional to the intersection’s magnitude. Hovering any region highlights it and displays a tooltip listing the intersecting sets and their size. The visualization uses venn.js with D3.js v7, applying colors per set and styling circle labels with contrast-aware text color. Computed intersections, including two-, three-, four-, five-, six-, and seven-way combinations, are predefined in a data array passed to `venn.VennDiagram()` for layout and rendering.
AI-generated description7-Way Venn Diagram
This project creates an interactive 7-way Venn diagram using the venn.js library and D3.js. A Venn diagram is a graphical representation of the possible logical relations between a collection of sets.
Features
- Visualizes 7 different sets (A, B, C, D, E, F, G) and their intersections
- Interactive: hover over regions to highlight them and see details about the intersection
- Color-coded sets for easy identification
- Dynamic tooltips showing intersection information
- Responsive layout with clean design
Technologies Used
- HTML5
- CSS3
- JavaScript (ES6)
- D3.js for data visualization
- venn.js for specific Venn diagram calculations and rendering
How It Works
The diagram uses circles to represent each set, and the overlapping areas represent intersections between sets. The size of each region is proportional to the size of the intersection.
For a 7-way Venn diagram, there are 2^7 - 1 = 127 possible non-empty intersections. While not all of these can be easily visualized in a traditional Venn diagram, the venn.js library uses algorithms to position and size the circles to best represent the key intersections.
Challenge
Creating a complete 7-way Venn diagram is mathematically challenging - a traditional circular Venn diagram can cleanly show intersections for up to 3 sets. For more sets, specialized representations like the Edwards-Venn diagram are typically used. This implementation uses venn.js to create an approximation that shows the key relationships while remaining visually interpretable.