Chord diagrams
Chord layouts show object-to-object relationships.
d3 has several predefined layouts to help with generating charts.
d3 Gallery
All of your favorites should be there:
All layouts have in common that they're not drawing anything - they're only doing data manipulation to have an easier time drawing.
Chord layouts show object-to-object relationships.
d3 provides d3.chord to calculate the outer ring segments.
d3.ribbon calculates the connecting ribbons between those segments.
Let's play around with Mike Bostock's Chord Diagram example (in code/d3-layouts/01_bostock_chord.html)
Mike Bostock: Chord Diagram
Most layouts are based on some type of hierarchical data. More tree than list.
Tabular data (such as CSVs) needs to be converted to a hierarchy (Object) format first, before the d3 hierarchical layouts can use it.
You can use d3.stratify to do that:
var data = [{}, {}, {}, ...];
var root = d3.stratify()
.parentId(function(d){ return d.parent; })
(data);
Try loading and stratifying the data in code/d3-layouts/02_hierarchical_data.html
One special weirdness of d3.stratify: every parent
node needs it own entry in the data!
id; region;
Netherlands; Europe;
Europe; ; <-- required!
Stratified data becomes a d3.hierarchy object:
d3-hierarchy#hierarchy
The good news: once the data has been stratified, drawing it is usually very straightforward!
To put that to the test: let's draw a circle packing viz based on the data!
Let's have a look at a Mike Bostock example for drawing a tree based on d3.tree:
Mike Bostock: Tidy Tree
Change the world pack layout from before to a tree layout!
Finally, one last example: the treemap.
Mike Bostock: Treemap
