Brief introduction
D3.js is the library most used for artist level Data Visualization. For a basic / easy way of doing data visualization with javascript please see highcharts or ECharts.
Notes
JQuery like manipulation
1 | <html> |
Choose elements and bind the data
1 | var body = d3.select("body"); //selection |
- datum():bind one data to elements
- data(): bind an array to elements
1 | var dataset = ["I like dog","I like cat","I like snake"]; |
SVG Canvas & Scales & Axis
D3.js uses SVG as canvas to draw.
1 | var width = 300; //canvas width |
Animation
1 | var svg = d3.select('body') |
Or delay()
which is used for a transformation delay.
User interaction
Use function .on('eventlisener', func(){})
.
Layout
A list of bult-in layout:
- Bundle - apply Holten’s hierarchical bundling algorithm to edges.
- Chord - produce a chord diagram from a matrix of relationships.
- Cluster - cluster entities into a dendrogram.
- Force - position linked nodes using physical simulation.
- Hierarchy - derive a custom hierarchical layout implementation.
- Histogram - compute the distribution of data using quantized bins.
- Pack - produce a hierarchical layout using recursive circle-packing.
- Partition - recursively partition a node tree into a sunburst or icicle.
- Pie - compute the start and end angles for arcs in a pie or donut chart.
- Stack - compute the baseline for each series in a stacked bar or area chart.
- Tree - position a tree of nodes tidily.
- Treemap - use recursive spatial subdivision to display a tree of nodes.
Reference
- D3.js basic example: http://d3js.org/
- D3.js wiki: https://github.com/mbostock/d3/wiki
- Tutorials: https://github.com/mbostock/d3/wiki/Tutorials
- Reference tutorial in chinese: http://wiki.jikexueyuan.com/project/d3wiki/