guillaumechaumet · July 7, 2017 08:24
diff --git a/index.html b/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>
	<!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>