#### D3 - Circle Diagrams

Statistics Invoices Schedule

##### 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.

Size
Count

###### 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.

Size
Count

###### 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.