Example of simple line chart. Data stores in .tsvfile. 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.

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.extentand d3.max- compute domains; d3.svg.axis- display axes; d3.svg.area- display area shape.

Example of two-valuearea chart. Lines as in previous example are optional. Data stored in .tsvfile. 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.minand d3.max- compute domains; d3.svg.axis- display axes; d3.svg.area- display area shape.

Example of multiple seriesline 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.minand d3.max- compute domains; d3.keys- compute column names; d3.svg.axis- display axes; d3.svg.line- display line shape.

Example of stacked areachart. 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.extentand 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.

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.extentand 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.

This variation of a line chart demonstrates how to use a linear gradientas 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.