Line / Area Chart

This example demonstrates how to render a simple Cartesian chart with a line and an area series. The chart is constructed from the following components:

A Cartesian chart, with linear scales for x and y, is used to render the plot area, axes and labels.
The data is rendered via a line series and an area series, these are combined into a single series using the multi series component.
A gridlines component is also added to the multi series.
The extent utility function is used to calculate the domain for the x and y scale, with padding applied to the y scale.

forked from ColinEberhardt's block: Line / Area Chart

<!DOCTYPE html>

<script src="https//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<script src="https//unpkg.com/babel-standalone@6/babel.min.js"></script>

var yExtent = fc.extentLinear()
  .accessors([d => d.y, d => d.z])
  .pad([0.4, 0.4])
  .padUnit('domain');

var xExtent = fc.extentLinear()
  .accessors([d => d.x]);

// create a chart
var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear())
  .yDomain(yExtent(data))
  .yLabel('Sine / Cosine')
  .yOrient('left')
  .xDomain(xExtent(data))
  .xLabel('Value')
  .chartLabel('Sine/Cosine Line/Area Chart');

// create a pair of series and some gridlines
var sinLine = fc.seriesSvgLine()
  .crossValue(d => d.x)
  .mainValue(d => d.y);

var cosLine = fc.seriesSvgArea()
  .crossValue(d => d.x)
  .mainValue(d => d.z);

var gridlines = fc.annotationSvgGridline();

// combine using a multi-series
var multi = fc.seriesSvgMulti()
  .series([gridlines, sinLine, cosLine]);

chart.plotArea(multi);

// render
d3.select('#simple-chart')
  .datum(data)
  .call(chart);
</script>