Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active June 16, 2020 16:28
Show Gist options
  • Save mbostock/f48fcdb929a620ed97877e4678ab15e6 to your computer and use it in GitHub Desktop.
Save mbostock/f48fcdb929a620ed97877e4678ab15e6 to your computer and use it in GitHub Desktop.
Download ZIP
Brush & Zoom II
Raw
.block
license: gpl-3.0
height: 600
Raw
README.md

Using d3-brush to zoom to the brushed region. Double-click or double-tap to zoom out. Another approach is to use Focus + Context.

Raw
index.html
<!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>
@akshayKhot
Copy link

I am not sure if this is the right place to ask this question, but I don't understand the purpose of the following code.

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;
}

I know how setTimeout behaves, but not sure how and why it's used like this, and how it fits in with the rest of the code.

@nvelden
Copy link

nvelden commented Apr 27, 2020 •
edited
Loading

Would it be possible to update the code of the graph for V5?

@rben01
Copy link

rben01 commented Jun 16, 2020

Akshay, the reason for the timeout is to capture double click events. Mouse-up on the graph triggers a brush end. The first time this happens, we set the timer to clear idleTimeout, which tracks whether we've recently (at most idleDelay ms ago) clicked. The second time we mouse-up, one of two things can happen: either the timer has expired, in which case idleTimeout is null again and so we return without changing things; or the timer hasn't expired, in which case idleTimeout is not null and we continue on to set x.domain and y.domain.

In other words the timer is there to make sure we've double clicked and not just single clicked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment