Zoom and Brush in d3

forked from nivas8292's block: Zoom and Brush in d3

<!DOCTYPE html>
<html>
    <head>
        <title>D3 Level 3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <style>
            svg {
                font: 10px sans-serif;
            }
            .area {
                fill: steelblue;
                clip-path: url(#clip);
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
            .brush .extent {
                stroke: #fff;
                fill-opacity: .125;
                shape-rendering: crispEdges;
            }
        </style>
    </head>
    <body>
        <button id="reset">Reset</button>
        <br>
        <script>
            var W = 960, H = 500;

//Setting up Margins
            var mainMargin = {top: 10, right: 10, left: 70, bottom: 140};
            var subMargin = {top: 400, right: 10, bottom: 40, left: 70};

//Widths, Heights
            var width = W - mainMargin.left - mainMargin.right;
            var mainHeight = H - mainMargin.top - mainMargin.bottom;
            var subHeight = H - subMargin.top - subMargin.bottom;

//Date Parser
            var parseDate = d3.time.format("%b %Y").parse;

//Main Chart Scales
            var mainXScale = d3.time.scale().range([0, width]);
            var mainYScale = d3.scale.linear().range([mainHeight, 0]);

//Sub Chart scales
            var subXScale = d3.time.scale().range([0, width]);
            var subYScale = d3.scale.linear().range([subHeight, 0]);

//Main Chart Axes
            var mainXAxis = d3.svg.axis().scale(mainXScale).orient('bottom');
            var mainYAxis = d3.svg.axis().scale(mainYScale).orient('left');

//Sub Chart Axes
            var subXAxis = d3.svg.axis().scale(subXScale).orient('bottom');
            var subYAxis = d3.svg.axis().scale(subYScale).orient('left').ticks(2);

//Area
            var mainArea = d3.svg.area()
                    .interpolate('monotone')
                    .x(function (d) {
                        return mainXScale(d.date)
                    })
                    .y0(mainHeight)
                    .y1(function (d) {
                        return mainYScale(d.price)
                    });

var subArea = d3.svg.area()
                    .interpolate('monotone')
                    .x(function (d) {
                        return subXScale(d.date)
                    })
                    .y0(subHeight)
                    .y1(function (d) {
                        return subYScale(d.price)
                    });

var svg = d3.select('body').append('svg')
                    .attr('width', W)
                    .attr('height', H);

svg.append('defs')
                    .append('clipPath')
                    .attr('id', 'clip')
                    .append('rect')
                    .attr('width', width)
                    .attr('height', mainHeight);

var main = svg.append('g')
                    .classed('main', true)
                    .attr("transform", "translate(" + mainMargin.left + "," + mainMargin.top + ")");

var sub = svg.append('g')
                    .classed('sub', true)
                    .attr("transform", "translate(" + subMargin.left + "," + subMargin.top + ")");

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

d3.csv('data.csv', function (d) {
                d.date = parseDate(d.date);
                d.price = +d.price;
                return d;
            }, function (err, data) {
                mainXScale.domain(d3.extent(data, function (d) {
                    return d.date
                }));
                mainYScale.domain([0, d3.max(data, function (d) {
                        return d.price
                    })]);

subXScale.domain(mainXScale.domain());
                subYScale.domain(mainYScale.domain());

main.append("g")
                        .classed("x axis", true)
                        .attr("transform", "translate(0, " + mainHeight + ")")
                        .call(mainXAxis);
                main.append("g")
                        .classed("y axis", true)
                        .attr("transform", "translate(0, 0)")
                        .call(mainYAxis);

main.append('path')
                        .datum(data)
                        .classed('area', true)
                        .attr('d', mainArea);

sub.append("g")
                        .classed("x axis", true)
                        .attr("transform", "translate(0, " + subHeight + ")")
                        .call(subXAxis);
                sub.append("g")
                        .classed("y axis", true)
                        .attr("transform", "translate(0, 0)")
                        .call(subYAxis);

sub.append('path')
                        .datum(data)
                        .classed('area', true)
                        .attr('d', subArea);

sub.append("g")
                        .classed("x brush", true)
                        .call(brush)
                        .selectAll("rect")
                        .attr("y", -6)
                        .attr("height", subHeight + 7);

d3.select('#reset').on('click', function () {
                    mainXScale.domain(subXScale.domain());
                    main.select('.area').transition().attr('d', mainArea);
                    main.select('.x.axis').transition().call(mainXAxis);
                    sub.select('rect.extent').transition().attr('width', 0);
                })
            });

function brushed() {
                mainXScale.domain(brush.empty() ? subXScale.domain() : brush.extent());
                main.select('.area').attr('d', mainArea);
                main.select('.x.axis').call(mainXAxis);
            }
        </script>
    </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js