Basic Venn diagrams
Basic Venn diagram
A 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.
Custom colors
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.
Custom layout
Venn diagram layout uses SVG for drawing circles,
that means it supports all available shape styling. This example
demonstrates flexibility of SVG's stroke and fill
properties and shows rings instead of circles.
Advanced Venn diagrams
Weighted diagram
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.
Simple interaction
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.
Tooltip
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 chords
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.update, chord.render and
chord.clear chart functions.
Chord tweens
Chord and tick tweens
Example of chord and 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
Example of 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.
Basic sunburst
Sunburst diagram
A 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.
Zoomable sunburst
Zoom and update
Example of zooming and 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
Example of 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.
