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.
