John Guo jyguo

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

• d3.csv - load and parse data
• d3.scale.ordinal - x-position encoding and color encoding
• d3.scale.linear - y-position encoding
• d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
• d3.max - compute domains
• d3.keys - compute column names
• d3.svg.axis - display axes

Say your dataset is an array of numbers, and includes both positive and negative values. Use two scales to construct the bar chart: a quantitative scale (such as a [linear scale][1]) to compute the bar positions along the x-axis, and an [ordinal scale][2] with rangeBands to compute the bar positions along the y-axis.

For the quantitative scale, compute the data domain (the minimum and maximum value) using [d3.extent][3]:

var x = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.value; }))
    .range([0, width]);

[Nicing][4] the scale will extend the extent slightly to the nearest round numbers. If you want the zero-value to be centered in the middle of the canvas, take the greater of the minimum and maximum value by magnitude, or simply hard-code the desired domain.

This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

• d3.csv - load and parse data
• d3.scale.ordinal - x-position encoding and color encoding
• d3.scale.linear - y-position encoding
• d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
• d3.max - compute domains
• d3.keys - compute column names
• d3.svg.axis - display axes

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

• d3.tsv - load and parse data
• d3.time.format - parse dates
• d3.time.scale - x-position encoding
• d3.scale.linear - y-position encoding
• d3.extent - compute domains
• d3.svg.axis - display axes
• d3.svg.line - display line shape