Simple line chart
Example of simple line chart. Data stores in
.tsv file. 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.
Area chart
Example of area chart. Lines are hidden by
default, but can be easily added in chart options. 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 and d3.max - compute
domains; d3.svg.axis - display axes;
d3.svg.area - display area shape.
Bivariate Area Chart
Example of two-value area chart. Lines as in
previous example are optional. Data stored in
.tsv file. 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, d3.min and
d3.max - compute domains;
d3.svg.axis - display axes;
d3.svg.area - display area shape.
Multiple series
Example of multiple series line chart. 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.scale.category10,
d3.scale.ordinal - color encoding;
d3.extent, d3.min and
d3.max - compute domains; d3.keys -
compute column names; d3.svg.axis - display axes;
d3.svg.line - display line shape.
Stacked areas
Example of stacked area chart. The chart employs
conventional margins and a number of D3 features:
d3.tsv - load and parse data;
d3.time.format - parse dates;
d3.format - format percentages;
d3.time.scale - x-position encoding;
d3.scale.linear - y-position encoding;
d3.scale.category20,
d3.scale.ordinal - color encoding;
d3.extent and d3.max - compute
domains; d3.layout.stack - compute stacked
y-positions; d3.keys - compute column names;
d3.svg.axis - display axes;
d3.svg.area - display area shape.
Stacked areas via nest
Example of stacked areas via nest, constructed from a CSV
file. The chart employs conventional margins and a number of
D3 features: d3.tsv - load and parse data;
d3.time.format - parse dates;
d3.format - format percentages;
d3.time.scale - x-position encoding;
d3.scale.linear - y-position encoding;
d3.scale.category20,
d3.scale.ordinal - color encoding;
d3.extent and d3.max - compute
domains; d3.layout.stack - compute stacked
y-positions; d3.keys - compute column names;
d3.svg.axis - display axes;
d3.svg.area - display area shape.
Gradient encoding
This variation of a line chart demonstrates how to use a
linear gradient as a quantitative color encoding
redundant with y-position. The gradient units are
defined as userSpaceOnUse, such that the gradient stops can be
positioned explicitly rather than based on the line’s bounding
box.
