D3 Examples - Scatterplot with brush d3 v4

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- adapted from mbostock v4 area brush https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172-->
<meta charset="utf-8">
​
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
    var focusMargin = {top: 20, right: 20, bottom: 110, left: 50},
        focusWidth = 960 - focusMargin.left - focusMargin.right,
        focusHeight = 500 - focusMargin.top - focusMargin.bottom,
​
        contextMargin = {top: 430, right: 20, bottom: 30, left: 40},
        contextHeight = 500 - contextMargin.top - contextMargin.bottom;
​
    var parseDate = d3.timeParse("%b %Y");
​
    var focusXScale = d3.scaleTime().range([0, focusWidth]),
        focusYScale = d3.scaleLinear().range([focusHeight, 0]),
​
        contextXScale = d3.scaleTime().range([0, focusWidth]),
        contextYScale = d3.scaleLinear().range([contextHeight, 0]);
​
    var focusXAxisGenerator = d3.axisBottom(focusXScale),
        contextXAxisGenerator = d3.axisBottom(contextXScale),
        focusYAxisGenerator = d3.axisLeft(focusYScale);
​
    var wrapper = d3.select("body").append("svg")
        .attr("width", focusWidth + focusMargin.left + focusMargin.right)
        .attr("height", focusHeight + focusMargin.top + focusMargin.bottom);
​
    wrapper.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", focusWidth)
        .attr("height", focusHeight);
​
    var focusBounds = wrapper.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + focusMargin.left + "," + focusMargin.top + ")");
​
    var contextBounds = wrapper.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + contextMargin.left + "," + contextMargin.top + ")");
​
    d3.csv("sp500.csv", type, function (error, data) {
        if (error) throw error;
​
        focusXScale.domain(d3.extent(data, function (d) {
            return d.date;
        }));
        focusYScale.domain([0, d3.max(data, function (d) {
            return d.price;
        }) + 200]);
        contextXScale.domain(focusXScale.domain());
        contextYScale.domain(focusYScale.domain());
​
        // append scatter plot to main chart area
        var focusDots = focusBounds.append("g");
​
        focusDots.attr("clip-path", "url(#clip)");
​
        focusDots.selectAll("dot")
            .data(data)
            .enter().append("circle")
            .attr('class', 'dot')
            .attr("r", 5)
            .style("opacity", .5)
            .attr("cx", function (d) {
                return focusXScale(d.date);
            })
            .attr("cy", function (d) {
                return focusYScale(d.price);
            })
​
        focusBounds.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + focusHeight + ")")
            .call(focusXAxisGenerator);
​
        focusBounds.append("g")
            .attr("class", "axis axis--y")
            .call(focusYAxisGenerator);
​
        focusBounds.append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 0 - focusMargin.left)
            .attr("x", 0 - (focusHeight / 2))
            .attr("dy", "1em")
            .style("text-anchor", "middle")
            .text("Price");
​
        wrapper.append("text")
            .attr("transform",
                "translate(" + ((focusWidth + focusMargin.right + focusMargin.left) / 2) + " ," +
                (focusHeight + focusMargin.top + focusMargin.bottom) + ")")
            .style("text-anchor", "middle")
            .text("Date");
​
        // append scatter plot to brush chart area
        var contextDots = contextBounds.append("g");
        contextDots.attr("clip-path", "url(#clip)");
        contextDots.selectAll("dot")
            .data(data)
            .enter().append("circle")
            .attr('class', 'dotContext')
            .attr("r", 3)
            .style("opacity", .5)
            .attr("cx", function (d) {
                return contextXScale(d.date);
            })
            .attr("cy", function (d) {
                return contextYScale(d.price);
            })
​
        contextBounds.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + contextHeight + ")")
            .call(contextXAxisGenerator);
​
        contextBounds.append("g")
            .attr("class", "brush")
            .call(brush)
            .call(brush.move, focusXScale.range());
​
    });
​
    //create brush function redraw scatterplot with selection
    function brushed() {
        var selection = d3.event.selection;
        focusXScale.domain(selection.map(contextXScale.invert, contextXScale));
        focusBounds.selectAll(".dot")
            .attr("cx", function (d) {
                return focusXScale(d.date);
            })
            .attr("cy", function (d) {
                return focusYScale(d.price);
            });
        focusBounds.select(".axis--x").call(focusXAxisGenerator);
    }
​
    var brush = d3.brushX()
        .extent([[0, 0], [focusWidth, contextHeight]])
        .on("brush", brushed);
​
    function type(d) {
        d.date = parseDate(d.date);
        d.price = +d.price;
        return d;
    }
​
</script>
​
    