Skip to content

Instantly share code, notes, and snippets.

@iosonosempreio

iosonosempreio/index.html

Forked from feyderm/index.html
Last active June 4, 2020 16:40
Show Gist options
  • Save iosonosempreio/6f8817f367a9c7dc6c2a126d18dd8882 to your computer and use it in GitHub Desktop.
Save iosonosempreio/6f8817f367a9c7dc6c2a126d18dd8882 to your computer and use it in GitHub Desktop.
Download ZIP
D3 v4 single axis pan and zoom with lines
Raw
index.html
<!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 = 960,
svg_dy = 500
chart_dx = svg_dx - margin.right - margin.left,
chart_dy = svg_dy - margin.top - margin.bottom;
var xScale = d3.scaleLinear()
.domain([0,9])
.range([margin.left, svg_dx])
// data
var y = d3.randomNormal(400, 100);
var x_jitter = d3.randomUniform(-100, 100);
var d = d3.range(250)
.map(function() {
const line = [0,1,2,3,4,5,6,7,8,9].map((d)=>([xScale(d), d3.randomUniform(-5,5)()]))
return [x_jitter(), y(), line];
});
console.log(d)
// 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 line = svg.append("g")
.attr("id", "lines")
// .attr("transform", "translate(200, 0)")
.selectAll("path")
.data(d)
.enter()
.append("path")
.attr("transform", d=>"translate(0, "+yScale(d[1])+")")
.attr('d', d=>d3.line().curve(d3.curveMonotoneX)(d[2]))
.attr("fill","transparent")
.attr("stroke", 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('+margin.left+',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);
line
.attr("transform", d=>"translate(0, "+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