How to use d3fc - 10 common examples

chart.decorate((container, data) => {
        oldDecorate(container, data);
        if (!axisSplitter) return;

        if (axisSplitter.haveSplit()) {
            // Render a second axis on the right of the chart
            const altData = axisSplitter.altData();

            const y2AxisDataJoin = fc.dataJoin("d3fc-svg", "y2-axis").key(d => d);
            const ySeriesDataJoin = fc.dataJoin("g", "y-series").key(d => d);

            // Column 5 of the grid
            container
                .enter()
                .append("div")
                .attr("class", "y2-label-container")
                .style("grid-column", 5)
                .style("-ms-grid-column", 5)
                .style("grid-row", 3)
                .style("-ms-grid-row", 3)
                .style("width", altAxis.size || "1em")
                .style("display", "flex")
                .style("align-items", "center")
                .style("justify-content", "center")
                .append("div")

chart.decorate((container, data) => {
        oldDecorate(container, data);
        if (!axisSplitter) return;

        if (axisSplitter.haveSplit()) {
            // Render a second axis on the right of the chart
            const altData = axisSplitter.altData();

            const y2AxisDataJoin = fc.dataJoin("d3fc-svg", "y2-axis").key(d => d);
            const ySeriesDataJoin = fc.dataJoin("g", "y-series").key(d => d);

            // Column 5 of the grid
            container
                .enter()
                .append("div")
                .attr("class", "y2-label-container")
                .style("grid-column", 5)
                .style("-ms-grid-column", 5)
                .style("grid-row", 3)
                .style("-ms-grid-row", 3)
                .style("width", altAxis.size || "1em")
                .style("display", "flex")
                .style("align-items", "center")
                .style("justify-content", "center")
                .append("div")
                .attr("class", "y-label")

export default function() {
    var charts = [];
    var dispatch = d3.dispatch(event.viewChange);

    function key(d) { return d.option.id; }

    var secDataJoin = fc.util.dataJoin()
        .children(true)
        .selector('.secondary-container')
        .element('svg')
        .attr('class', function(d) {
            return 'secondary-container secondary-' + d.valueString;
        })
        // Issue with elements being regenerated due to data being overwritten. See:
        // https://github.com/ScottLogic/d3fc/blob/0327890d48c9de73a41d901df02bac88dc83e398/src/series/multi.js#L26-L36
        .key(function(d) {
            return key(this.__secondaryChart__ || d);
        });

    function multiChart(selection) {
        selection.each(function(model) {
            var secondaries = secDataJoin(this, charts);

function primary(selection) {
        var model = selection.datum();

        if (model.selectorsChanged) {
            selectorsChanged(model);
        }

        primaryChart.xDomain(model.viewDomain);

        xScale.discontinuityProvider(model.discontinuityProvider);

        crosshair.snap(fc.util.seriesPointSnapXOnly(currentSeries.option, model.visibleData));
        updateCrosshairDecorate(model.visibleData);

        movingAverage(model.data);
        bollingerAlgorithm(model.data);

        // Scale y axis
        // Add percentage padding either side of extreme high/lows
        var extentAccessors = getExtentAccessors(multi.series());
        var paddedYExtent = fc.util.extent()
            .fields(extentAccessors)
            .pad(0.08)(model.visibleData);
        primaryChart.yDomain(paddedYExtent);

        // Find current tick values and add close price to this list, then set it explicitly below
        var latestPrice = currentYValueAccessor(model.data[model.data.length - 1]);
        var tickValuesWithAnnotations = produceAnnotatedTickValues(yScale, [latestPrice]);

};
    cartesian.yAxis = (...args) => {
        if (!args.length) {
            return yAxis;
        }
        yAxis = args[0];
        return cartesian;
    };

    const scaleExclusions = exclude(
        /range\w*/, // the scale range is set via the component layout
        /tickFormat/ // use axis.tickFormat instead (only present on linear scales)
    );
    rebindAll(cartesian, xScale, scaleExclusions, prefix("x"));
    rebindAll(cartesian, yScale, scaleExclusions, prefix("y"));
    rebindAll(cartesian, xAxisStore, prefix("x"));
    rebindAll(cartesian, yAxisStore, prefix("y"));
    return cartesian;
};

return cartesian;
    };
    cartesian.yAxis = (...args) => {
        if (!args.length) {
            return yAxis;
        }
        yAxis = args[0];
        return cartesian;
    };

    const scaleExclusions = exclude(
        /range\w*/, // the scale range is set via the component layout
        /tickFormat/ // use axis.tickFormat instead (only present on linear scales)
    );
    rebindAll(cartesian, xScale, scaleExclusions, prefix("x"));
    rebindAll(cartesian, yScale, scaleExclusions, prefix("y"));
    rebindAll(cartesian, xAxisStore, prefix("x"));
    rebindAll(cartesian, yAxisStore, prefix("y"));
    return cartesian;
};

cartesian.yAxis = (...args) => {
        if (!args.length) {
            return yAxis;
        }
        yAxis = args[0];
        return cartesian;
    };

    const scaleExclusions = exclude(
        /range\w*/, // the scale range is set via the component layout
        /tickFormat/ // use axis.tickFormat instead (only present on linear scales)
    );
    rebindAll(cartesian, xScale, scaleExclusions, prefix("x"));
    rebindAll(cartesian, yScale, scaleExclusions, prefix("y"));
    rebindAll(cartesian, xAxisStore, prefix("x"));
    rebindAll(cartesian, yAxisStore, prefix("y"));
    return cartesian;
};

return null;
            } else {
                // This stops the brush data being overwritten by the point data
                return this.data;
            }
        });

    var brushMask = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; })
        .decorate(function(selection) {
            selection.enter().attr('fill', 'url("#brush-gradient")');
        });

    var brushLine = fc.series.line()
        .xValue(function(d) { return d.date; })
        .yValue(function(d) { return d.close; });

    var layoutWidth;

    var sampler = fc.data.sampler.largestTriangleThreeBucket()
        .x(function(d) { return xScale(d.date); })
        .y(function(d) { return yScale(d.close); });

    var brushMaskMulti = fc.series.multi()
        .series([brushMask, brushLine])
        .xScale(xScale)
        .yScale(yScale);

    function setHide(selection, brushHide) {
        selection.select('.plot-area')

var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();

    var navChart = fc.chart.cartesian(xScale, yScale)
        .yTicks(0)
        .margin({
            bottom: bottomMargin      // Variable also in navigator.less - should be used once ported to flex
        })
        .xOuterTickSize(0)
        .yOuterTickSize(0);

    var viewScale = fc.scale.dateTime();

    var area = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; });

    var line = fc.series.line()
        .xValue(function(d) { return d.date; })
        .yValue(function(d) { return d.close; });
    var brush = d3.svg.brush();
    var navMulti = fc.series.multi()
        .series([area, line, brush])
        .decorate(function(selection) {
            var enter = selection.enter();

            selection.selectAll('.background, .extent')
                .attr('height', extentHeight)
                .attr('y', borderWidth);

export default function() {
    var navHeight = 100; // Also maintain in variables.less
    var bottomMargin = 40; // Also maintain in variables.less
    var navChartHeight = navHeight - bottomMargin;
    var borderWidth = 1; // Also maintain in variables.less
    var extentHeight = navChartHeight - borderWidth;
    var barHeight = extentHeight;
    var handleCircleCenter = borderWidth + barHeight / 2;
    var handleBarWidth = 2;
    var yExtentPadding = [0, 0.04];
    var numberOfSamples = 200;

    var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();

    var navChart = fc.chart.cartesian(xScale, yScale)
        .yTicks(0)
        .margin({
            bottom: bottomMargin      // Variable also in navigator.less - should be used once ported to flex
        })
        .xOuterTickSize(0)
        .yOuterTickSize(0);

    var viewScale = fc.scale.dateTime();

    var area = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; });