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.

<!DOCTYPE html>

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

<script src="//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.chartCartesian(
    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.svgPlotArea(multi);

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

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41