D3 Area Chart with Context

by Eamonn Maguire

HTML

<h3>Apple's Shares</h3>

<div...

CSS

pre {
    display:none;
}
path.fc.area {
    fill: #1abc9c;
}
.axis path, .axis line {
    fill: none;
    stroke:black;
    shape-rendering: crispEdges;
}
.brush .extent {
    fill-opacity: .1;
    stroke: #fff;
    shape-rendering: crispEdges;
}

JavaScript

var area_chart = (function () {

    var focus, x, x2, y, y2, area, brush, xAxis, yAxis, xAxis_context, context;

    var parseDate = d3.time.format("%d/%m/%Y").parse;

    function brushed() {
        x.domain(brush.empty() ? x2.domain() : brush.extent());
        focus.select(".area").attr("d", area);
        focus.select(".x.axis").call(xAxis);
    }

    function type(d) {
        console.log('Type is ' + d.date);
        d.date = parseDate(d.date);
        d.price = +d.close;
        return d;
    }

    return {
        createFCAreaChart: function (placement, reqwidth, reqheight, opts) {
            var margin = {
                top: 10,
                right: 10,
                bottom: 100,
                left: 60
            },
            margin_context = {
                top: reqheight - 60,
                right: 10,
                bottom: 20,
                left: 60
            },
            width = reqwidth - margin.left - margin.right,
                height = reqheight - margin.top - margin.bottom,
                height_context = reqheight - margin_context.top - margin_context.bottom;

            var yscale = typeof opts.scale !== 'undefined' ? opts.scale : d3.scale.linear();
            var show_context = typeof opts.context !== 'undefined' ? opts.context : false;
            var zooming = typeof opts.zoom !== 'undefined' ? opts.zoom : false;

            // we create 2 scales, one for the main plot, and one for the 'context'
            x = d3.time.scale().range([0, width]),
            x2 = d3.time.scale().range([0, width]),
            y = yscale.range([height, 0]),
            y2 = d3.scale.linear().range([height_context, 0]);

            xAxis = d3.svg.axis().scale(x).orient("bottom"),
            xAxis_context = d3.svg.axis().scale(x2).orient("bottom"),
            yAxis = d3.svg.axis().scale(y).orient("left");


            brush = d3.svg.brush().x(x2).on("brush", brushed);

            area = d3.svg.area()
               ...