Skip to content

Instantly share code, notes, and snippets.

@guillaumechaumet

guillaumechaumet/index.html

Last active July 7, 2017 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guillaumechaumet/c345691d8a3ac540436dd01c7c1032e6 to your computer and use it in GitHub Desktop.
Save guillaumechaumet/c345691d8a3ac540436dd01c7c1032e6 to your computer and use it in GitHub Desktop.
Download ZIP
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.randomLogNormal(15, 5),
sqrt3 = Math.sqrt(3),
points0 = d3.range(300).map(function() { return [random() + sqrt3, random() + 1, 0]; }),
points1 = d3.range(300).map(function() { return [random() + 2 * 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.scaleLog().domain([d3.min(d3.min(points)),d3.max(d3.max(points))]).range([0, width]),
y = d3.scaleLog().domain([d3.min(d3.min(points)),d3.max(d3.max(points))]).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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment