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.