Skip to content

Instantly share code, notes, and snippets.

@balint42
balint42 / README.md
Last active May 17, 2016 23:04 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

@balint42
balint42 / README.md
Last active May 17, 2016 23:03 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski's beautiful work on Circos.

@balint42
balint42 / README.md
Last active May 17, 2016 23:03 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

See also this zoomable version.

@balint42
balint42 / README.md
Last active May 17, 2016 23:02 — forked from mbostock/.block

D3 example cartoonized with comic.js.

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.

Compare to this radial layout.

@balint42
balint42 / README.md
Last active May 17, 2016 23:01 — forked from mbostock/.block

D3 example cartoonized with comic.js.

This diagram shows the distribution of age groups in the United States over the last 150 years. Use the arrow keys to observe the changing population. Data from the Minnesota Population Center. Use the arrow keys to change the displayed year. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

@balint42
balint42 / index.html
Last active May 17, 2016 23:01 — forked from mbostock/.block
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://balint42.github.io/libs/pathseg.js"></script>
<script src="http://balint42.github.io/libs/comic.min.js"></script>
<script>
var mouse = [480, 250],
count = 0;