navigator chart with d3fc brush

This is a simple example of how to build a 'navigator' chart using the d3fc brush component. The example chart plots weather data collected by the University of Edinburgh.

The d3fc brush is built using the d3-brush component, but provides a simpler interface. This exampe highlights some of the d3fc-brush features:

The brush is data-driven, with the location of the brush determined by the data supplied via a data join.
The brush integrates with the d3fc cartesian chart component, with the extent of the brush automatically set based on the range of each axis.
The d3fc-brush selection (which defines the brushed range), is represented as a percentage, whereas d3-brush uses pixels. The use of a percentage selection makes it easier to resize a brushed chart.
The brush events expose utility functions for computing the axis domain based on the current selection, making it easier to handle brush events and update the 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://unpkg.com/babel-standalone@6/babel.min.js"></script>

// create the scales
    const x = d3.scaleTime()
        .domain(xExtent(data));
    const y = d3.scaleLinear()
        .domain(yExtent(data));

// create the data that is bound to the charts. It is a combination of the 
    // chart data and the brushed / navigator range
    var chartData = {
      series: data,
      // set an initial brushed range
      brushedRange: [0.75, 1]
    };

const area = fc.seriesSvgArea()
      .crossValue(d => d.date)
      .mainValue(d => d.temperature)
      .baseValue(y.domain()[0])
  
    const line = fc.seriesSvgLine()
      .crossValue(d => d.date)
      .mainValue(d => d.temperature);

const brush = fc.brushX()
      .on('brush', (evt) => {
        // if the brush has zero height there is no selection
        if (evt.selection) {
          // update the bound data based on the new selcetion
          chartData.brushedRange = evt.selection;
          // update the domain of the main chart to reflect the brush 
          mainChart.xDomain(evt.xDomain);
          render();
        }
      });

// create a multi series, combining the brush and area
    const multi = fc.seriesSvgMulti()
      .series([area, brush])
      .mapping((data, index, series) => {
        switch (series[index]) {
        case area:
          return data.series;
        case brush:
          return data.brushedRange;
        }
      });

// create the two charts
    const mainChart = fc.chartSvgCartesian(x, y)
        .plotArea(line);

const navigatorChart = fc.chartSvgCartesian(x.copy(), y.copy())
        .plotArea(multi);
  
    // set the initial domain for the main chart based on the 
    // brushed range
    var scale = d3.scaleLinear().domain(x.domain());
    mainChart.xDomain(chartData.brushedRange.map(scale.invert));

// each time the bruch changes, re-render both charts
    const render = () => {
      d3.select('#main-chart')
        .datum(chartData.series)
        .call(mainChart);

d3.select('#navigator-chart')
        .datum(chartData)
        .call(navigatorChart);
    }

render();

});

</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://unpkg.com/babel-standalone@6/babel.min.js

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3fc@13.1.1