Skip to content

Instantly share code, notes, and snippets.

@asifm

asifm/.block

Created December 10, 2017 10:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save asifm/3e92f14f8b656f259041ae948dd8c857 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save asifm/3e92f14f8b656f259041ae948dd8c857 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. asifm created this gist Dec 10, 2017.
    2 changes: 2 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    license: gpl-3.0
    height: 600
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    Using [d3-brush](https://github.com/d3/d3-brush) to zoom to the brushed region. Double-click or double-tap to zoom out. Another approach is to use [Focus + Context](/mbostock/34f08d5e11952a80609169b7917d4172).


    forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6'>Brush & Zoom II</a>
    84 changes: 84 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <svg width="960" height="600"></svg>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>

    var random = d3.randomNormal(0, 0.2),
    sqrt3 = Math.sqrt(3),
    points0 = d3.range(300).map(function() { return [random() + sqrt3, random() + 1, 0]; }),
    points1 = d3.range(300).map(function() { return [random() - sqrt3, random() + 1, 1]; }),
    points2 = d3.range(300).map(function() { return [random(), random() - 1, 2]; }),
    points = d3.merge([points0, points1, points2]);

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var k = height / width,
    x0 = [-4.5, 4.5],
    y0 = [-4.5 * k, 4.5 * k],
    x = d3.scaleLinear().domain(x0).range([0, width]),
    y = d3.scaleLinear().domain(y0).range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

    var xAxis = d3.axisTop(x).ticks(12),
    yAxis = d3.axisRight(y).ticks(12 * height / width);

    var brush = d3.brush().on("end", brushended),
    idleTimeout,
    idleDelay = 350;

    svg.selectAll("circle")
    .data(points)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d[0]); })
    .attr("cy", function(d) { return y(d[1]); })
    .attr("r", 2.5)
    .attr("fill", function(d) { return z(d[2]); });

    svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + (height - 10) + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(10,0)")
    .call(yAxis);

    svg.selectAll(".domain")
    .style("display", "none");

    svg.append("g")
    .attr("class", "brush")
    .call(brush);

    function brushended() {
    var s = d3.event.selection;
    if (!s) {
    if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
    x.domain(x0);
    y.domain(y0);
    } else {
    x.domain([s[0][0], s[1][0]].map(x.invert, x));
    y.domain([s[1][1], s[0][1]].map(y.invert, y));
    svg.select(".brush").call(brush.move, null);
    }
    zoom();
    }

    function idled() {
    idleTimeout = null;
    }

    function zoom() {
    var t = svg.transition().duration(750);
    svg.select(".axis--x").transition(t).call(xAxis);
    svg.select(".axis--y").transition(t).call(yAxis);
    svg.selectAll("circle").transition(t)
    .attr("cx", function(d) { return x(d[0]); })
    .attr("cy", function(d) { return y(d[1]); });
    }

    </script>
    Binary file added preview.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.