Skip to main content
SimilarExport ZIP
100%

Venn diagram

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jan 17, 2020
Created on Jan 16, 2020

A Venn diagram with four sets—one named "Long name is very loong is Long name is very loong"—shows pairwise intersections of size 2 against total set sizes of 10. Rendered as SVG with black background, overlapping regions use `mix-blend-mode: screen` for additive color blending, and paths brighten on mouseover via a `stroke` change. The layout is computed by the `venn.VennDiagram` function from the venn.js library, which is called through a D3 v4 selection with `datum` and `call`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

2_psuedo visualizations - venn diagram

A Venn diagram rendered as a single SVG displays two overlapping blue circles on a white background, with a thin black border around the canvas and a title label above. The primary circle is filled with a light blue color and smoothly transitions to a darker blue on hover via a CSS `transition` on the `#blueCircle` element. Two smaller, unfilled circles outlined in white are positioned over the main circle to suggest intersection regions, though no data values or set labels are encoded. The example uses raw SVG elements (`circle`, `rect`, `text`) with no external JavaScript libraries, and its source is credited to the DataViz Catalogue.

DddG12g
76% match
Loading thumbnail…

Fork of psuedo visualizations - venn diagram

This example shows a static Venn diagram with two overlapping circles, rendered as inline SVG elements. A blue circle serves as the main set, while two white-outlined circles highlight the intersection and symmetric difference regions. The diagram uses basic SVG shape elements (`circle`, `rect`, `text`) with a CSS hover transition that changes the blue circle’s fill color to blue over one second. No external JavaScript libraries are used; the visualization relies entirely on SVG markup and CSS styling, with the catalog link in the README referencing the DataViz Catalogue as the design source.

Ppratk4@gmail.com
75% match
Loading thumbnail…

Venn Diagram with Opacity

Three overlapping circles form a Venn diagram, with each pair and the central triple intersection visible through translucent fills. The example shows how fill-opacity creates blended regions where circles overlap, using brown, steelblue, and green semi-transparent colors. The code draws static SVG circles via d3.select and append, setting explicit cx, cy, and r coordinates and applying style("fill-opacity", ".5") to each circle. No interaction or dynamic data is involved; the visualization relies solely on SVG styling to communicate set relationships.

Mmbostock
74% match
Loading thumbnail…

Fork of psuedo visualizations - venn diagram

This example shows a simple Venn diagram with two overlapping circles, displayed on a 960-by-500 SVG canvas with a title and a black border. The larger blue circle transitions to a darker blue on hover, while two smaller white-stroked circles mark the intersection regions. The visualization is built purely with static SVG elements—`circle` and `rect`—using inline CSS transitions for the hover effect. It cites the Data Visualization Catalogue as its source and renders without any JavaScript libraries, relying on the SVG’s native styling and interactivity.

Iimayankbisht
74% match
Loading thumbnail…

venn diagram

This example presents a Venn diagram using two overlapping circles rendered inside an SVG canvas. The visualization is built with React, and the SVG elements are constructed directly in the HTML markup. A blue circle represents one set, while its overlap with a second circle is highlighted using white strokes with partial opacity, visually distinguishing the intersection region. The code includes commented-out CSS transitions and hover effects, though these are not active in the current version. The diagram is static, with no interactive behavior or data-driven logic implemented in the JavaScript section.

GGusnaRWX
74% match
Loading thumbnail…

psuedo visualizations - venn diagram

This example shows a simple Venn diagram with two overlapping circles drawn as SVG shapes. The larger circle is rendered in a blue fill and reacts to mouse hover by smoothly transitioning its color to a deeper blue over one second. The two smaller circles are outlined in white with partial opacity, creating the illusion of intersection regions. The SVG is defined with fixed dimensions and a viewBox, using basic shape elements like `<circle>` and `<rect>`, with hover styling handled through CSS transitions.

NNita
73% match
Loading thumbnail…

Venn Diagram with Clipping

Three overlapping circles create a Venn diagram by clipping full-canvas rectangles, with each circle pair and the central triple intersection filled with its own distinct color. The SVG rendering uses `d3.select` and `d3.append` to construct a `defs` element containing three `clipPath` circles, then applies those clip paths to colored rectangles. A white rectangle, clipped by all three circles, marks the center overlap, while complementary colors (yellow, cyan, magenta) fill the pairwise intersections on a dark background.

Mmbostock
73% match
Loading thumbnail…

Fork of psuedo visualizations - venn diagram top

This example displays a basic two-circle Venn diagram with overlapping regions, rendered as SVG. The code uses standard SVG elements—`<circle>`, `<rect>`, and `<text>`—to draw the diagram, with a thick black border and a title. One circle has a CSS transition and hover effect that changes its fill color to blue. The layout is static, with no JavaScript libraries; it relies on hardcoded coordinates and SVG attributes for positioning.

Aadewole-top
73% match