#### D3 - Basic Lines

Statistics Invoices Schedule

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