Skip to content

Instantly share code, notes, and snippets.

@feyderm
Last active June 4, 2020 09:22
Show Gist options
  • Save feyderm/03602b83146d69b1b6993e5f98123175 to your computer and use it in GitHub Desktop.
Save feyderm/03602b83146d69b1b6993e5f98123175 to your computer and use it in GitHub Desktop.
D3 v4 single axis jitterplot pan and zoom
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="block"></div>
<script>
// dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
svg_dx = 330,
svg_dy = 500
chart_dx = svg_dx - margin.right - margin.left,
chart_dy = svg_dy - margin.top - margin.bottom;
// data
var y = d3.randomNormal(400, 100);
var x_jitter = d3.randomUniform(-100, 100);
var d = d3.range(750)
.map(function() {
return [x_jitter(), y()];
});
// fill
var colorScale = d3.scaleLinear()
.domain(d3.extent(d, function(d) { return d[1]; }))
.range([0, 1]);
// y position
var yScale = d3.scaleLinear()
.domain(d3.extent(d, function(d) { return d[1]; }))
.range([chart_dy, margin.top]);
// y-axis
var yAxis = d3.axisLeft(yScale);
// zoom
var svg = d3.select("#block")
.append("svg")
.attr("width", svg_dx)
.attr("height", svg_dy)
.call(d3.zoom().on("zoom", zoom)); // ref [1]
// plot data
var circles = svg.append("g")
.attr("id", "circles")
.attr("transform", "translate(200, 0)")
.selectAll("circle")
.data(d)
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return yScale(d[1]); })
.style("fill", function(d) {
var norm_color = colorScale(d[1]);
return d3.interpolateInferno(norm_color)
});
// add y-axis
var y_axis = svg.append("g")
.attr("id", "y_axis")
.attr("transform", "translate(75,0)")
.call(yAxis)
function zoom() {
// re-scale y axis during zoom; ref [2]
y_axis.transition()
.duration(50)
.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
// re-draw circles using new y-axis scale; ref [3]
var new_yScale = d3.event.transform.rescaleY(yScale);
circles.attr("cy", function(d) { return new_yScale(d[1]); });
}
// references
// [1]: http://bl.ocks.org/mbostock/3680999
// [2]: http://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f
// [3]: http://stackoverflow.com/questions/22355565/d3-prevent-distortion-when-zooming
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment