D3 Examples - Capped brush w/crossfilter

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
​
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
    clip-path: url(#clip);
}
​
.overlay{
    fill: steelblue;
}
</style>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<svg width="900" height="460"></svg>
<script>
queue()
.defer(d3.csv, "test.csv", type)
.await(ready);
​
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
var dateScale = d3.scaleLinear().domain([1420070400000, 1480550400000]).range([0, 67200]);
​
function ready(error, data) {
    if (error) {
        console.log("ERROR!");
        throw error;
  }
​
    var ndx = crossfilter(data);
​
    var dateDim = ndx.dimension(function (d) {return new Date(d.date);});
​
    var svg = d3.select("svg"),
    margin = {
        top: 30,
        right: 20,
        bottom: 110,
        left: 40
    },
    margin2 = {
        top: 390,
        right: 20,
        bottom: 30,
        left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;
​
    var x = d3.scaleTime()
        .domain(d3.extent(data, function (d) {return d.date;}))
        .range([0, width]),
    x2 = d3.scaleTime()
        .domain(x.domain())
        .range([0, width]),
    y = d3.scaleLinear()
        .domain(d3.extent(data, function (d) {return d.price;}))
        .range([height, 0]),
    y2 = d3.scaleLinear()
        .domain(y.domain())
        .range([height2, 0]);
​
    var oneYear = x2(new Date(2016, 0, 1))
        var oneMonth = x2(new Date(2015, 1, 1))
        var oneDay = x2(new Date(2015, 0, 2))
        var oneMonthZoom = 22.580645161290324
​
        var xAxis = d3.axisBottom(x),
    xAxis2 = d3.axisBottom(x2),
    yAxis = d3.axisLeft(y);
​
    var line = d3.line()
        .defined(function(d) { return d.price != 0; })
        .x(function (d) {return x(d.date);})
        .y(function (d) {return y(d.price);});
​
    var line2 = d3.line()
        .x(function (d) {return x2(d.date);})
        .y(function (d) {return y2(d.price);});
​
    svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);
​
    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    var context = svg.append("g")
         <!--.attr("class", "context")-- >
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
​
    var currentExtent = [0, 0]
​
    var brush = d3.brushX()
        .extent([[0, 0], [width, height2]])
        .on("brush start", updateCurrentExtent)
        .on("brush end", brushed);
​
    var zoom = d3.zoom()
        .scaleExtent([oneMonthZoom, Infinity])
        .translateExtent([[0, 0], [width, height]])
        .extent([[0, 0], [oneDay, height]])
        .on("zoom", zoomed);
​
    focus.append("path")
    .datum(dateDim.top(Infinity))
    .attr("class", "line")
    .attr("d", line);
​
    var gX = focus.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
​
    var gY = focus.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);
​
    context.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line2);
​
    context.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height2 + ")")
    .call(xAxis2);
​
    svg.append("rect")
    .attr("class", "zoom")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);
​
    context.append("g")
    .attr("class", "brush")
    .on("click", brushed)
    .call(brush)
    .call(brush.move, [new Date(2015, 0, 1), new Date(2015, 1, 1)].map(x));
​
    function updateCurrentExtent() {
        currentExtent = d3.brushSelection(this);
    }
​
    function print_filter(filter) {
        var f = eval(filter);
        if (typeof(f.length) != "undefined") {}
        else {}
        if (typeof(f.top) != "undefined") {
            f = f.top(Infinity);
        } else {}
        if (typeof(f.dimension) != "undefined") {
            f = f.dimension(function (d) {
                    return "";
                }).top(Infinity);
        } else {}
        console.log(filter + "(" + f.length + ") = " + JSON.stringify(f).replace("[", "[\n\t").replace(/}\,/g, "},\n\t").replace("]", "\n]"));
    }
​
    function return_filter(filter) {
        var f = eval(filter);
        if (typeof(f.length) != "undefined") {}
        else {}
        if (typeof(f.top) != "undefined") {
            f = f.top(Infinity);
        } else {}
        if (typeof(f.dimension) != "undefined") {
            f = f.dimension(function (d) {
                    return "";
                }).top(Infinity);
        } else {}
        return f;
    }
​
    function brushed() {
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
            return; // ignore brush-by-zoom
        var s = d3.event.selection;
​
        var p = currentExtent,
        xYear = oneMonth,
        left,
        right;
​
        if (d3.event.selection && s[1] - s[0] >= xYear) {
            if (p[0] == s[0] && p[1] < s[1]) { // case where right handle is extended
                if (s[1] >= width) {
                    left = width - xYear
                        right = width
                        s = [left, right];
                } else {
                    left = s[1] - xYear / 2
                        right = s[1] + xYear / 2
                        s = [left, right];
                }
            } else if (p[1] == s[1] && p[0] > s[0]) { // case where left handle is extended
                if (s[0] <= 0) {
                    s = [0, xYear];
                } else {
                    s = [s[0] - xYear / 2, s[0] + xYear / 2]
                }
            }
        }
​
        if (!d3.event.selection) { // if no selection took place and the brush was just clicked
            var mouse = d3.mouse(this)[0];
            if (mouse < xYear / 2) {
                s = [0, xYear];
            } else if (mouse + xYear / 2 > width) {
                s = [width - xYear, width];
            } else {
                s = [d3.mouse(this)[0] - xYear / 2, d3.mouse(this)[0] + xYear / 2];
            }
        }
​
        var filter = dateDim.filterRange(s.map(x2.invert));
​
        if (d3.event.sourceEvent && d3.event.sourceEvent.type == 'mouseup') {
            y.domain([d3.min(return_filter(filter), function (d) {
                        return d.price;
                    }) - 1,
                    d3.max(return_filter(filter), function (d) {
                        return d.price;
                    }) + 1]);
        }
​
        focus.select(".line").attr("d", line);
        focus.select(".axis--x").call(xAxis);
        focus.select(".axis--y").call(yAxis);
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
            .scale(width / (s[1] - s[0]))
            .translate(-s[0], 0));
    }
​
    function zoomed() {
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
            return; // ignore zoom-by-brush
        var t = d3.event.transform
        x.domain(t.rescaleX(x2).domain());
        gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
        //y.domain(t.rescaleY(y2).domain());
        focus.select(".line").attr("d", line);
        focus.select(".axis--x").call(xAxis);
        focus.select(".axis--y").call(yAxis);
        context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
    }
​
}
​
function type(d) {
        d.date = new Date(dateScale.invert(d.date));
        d.price = +d.price;
        return d;
    }
</script>
​
​
​
    