Basic Venn diagrams
Basic Venn diagram
Venn diagram is a diagram that shows all possible logical relations between a finite collection of sets. It's constructed with a collection of simple closed curves drawn in a plane, usually circles.
Since basic example of Venn diagram has a set of default colors (example above), custom colors can be also applied. This example demonstrates a basic set of
D3.js categorical colors that applied to the circles.
Venn diagram layout uses
SVG for drawing circles, that means it supports all available shape styling. This example demonstrates flexibility of SVG's
fill properties and shows rings instead of circles.
Advanced Venn diagrams
An example providing weights on the importance of each intersection area. This defines the non-overlapping intersection areas as being unimportant - so that the sets cluster around set '2' here.
Example of Venn diagram with simple
interaction. On circle hover, text changes the size and circles change fill opacity. Basically all nodes support custom styling. Also added optional callback on circle click.
Example of Venn diagram with optional
tooltip. Tooltip appears on
mouseover, follows the cursor position on
moucemove while it's on the circle and disappears on
mouseout. Fully customizable via CSS.
Basic chord diagram
Basic example of
chord diagram. Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering.
Simple update and render
A cleaner interface for updating and rendering the chart: chord returns an object; chord takes a container as its argument;
chord.clear chart functions.
Chord and tick tweens
tick tweens for updates. Demonstrates an
animation of ticks, labels and quadratic Bézier curves between arcs. During animation, all ticks and labels are hidden and appear after update.
arc tweens for updates. The chord layout is designed to work in conjunction with the chord shape and the arc shape. Animation of these arc shapes are demonstrated in this example.
sunburst is similar to the treemap, except it uses a
radial layout. The root node of the tree is at the center, with leaves on the circumference. The area of each arc corresponds to its value.
Sunburst with distortion
A sunburst (radial partition layout) built with
D3, featuring interactive distortion based on InterRing: when you click on a node, it expands to fill 80% of the parent arc. Clicking on the root node resets all distortions.
Zoom and update
updating data combination. Click on any arc to zoom in, and click on the center circle to zoom out. Use the Size/Count radio buttons to update the data.
zoomable sunburst diagram. Presents child levels as a parent level on arc click. Demo data has 3 levels, click on any arc to zoom in and click on the center circle to zoom out.