X/Y Zoom / D3 | Observable

Bring your data to life.

Workspace

Public

d3-zoom

Edited

Oct 24, 2023

8 forks

28 stars

chart = {

// set up the SVG

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const vo = svg.append("path");

const gx = svg.append("g");

const gy = svg.append("g");

const dots = svg.append("g")

.selectAll("ellipse")

.data(data)

.join("ellipse")

.attr("fill", () => d3.schemeOranges[9][(Math.random() * 9) | 0]);

// z holds a copy of the previous transform, so we can track its changes

let z = d3.zoomIdentity;

// set up the ancillary zooms and an accessor for their transforms

const zoomX = d3.zoom().scaleExtent([0.1, 10]);

const zoomY = d3.zoom().scaleExtent([0.2, 5]);

const tx = () => d3.zoomTransform(gx.node());

const ty = () => d3.zoomTransform(gy.node());

gx.call(zoomX).attr("pointer-events", "none");

gy.call(zoomY).attr("pointer-events", "none");

// active zooming

const zoom = d3.zoom().on("zoom", function(e) {

const t = e.transform;

const k = t.k / z.k;

const point = center(e, this);

// is it on an axis? is the shift key pressed?

const doX = point[0] > x.range()[0];

const doY = point[1] < y.range()[0];

const shift = e.sourceEvent && e.sourceEvent.shiftKey;

if (k === 1) {

// pure translation?

doX && gx.call(zoomX.translateBy, (t.x - z.x) / tx().k, 0);

doY && gy.call(zoomY.translateBy, 0, (t.y - z.y) / ty().k);

} else {

// if not, we're zooming on a fixed point

doX && gx.call(zoomX.scaleBy, shift ? 1 / k : k, point);

doY && gy.call(zoomY.scaleBy, k, point);

}

z = t;

redraw();

});

return svg

.call(zoom)

.call(zoom.transform, d3.zoomIdentity.scale(0.8))

.node();

function redraw() {

const xr = tx().rescaleX(x);

const yr = ty().rescaleY(y);

gx.call(xAxis, xr);

gy.call(yAxis, yr);

dots

.attr("cx", d => xr(d[0]))

.attr("cy", d => yr(d[1]))

.attr("rx", 6 * Math.sqrt(tx().k))

.attr("ry", 6 * Math.sqrt(ty().k));

vo.attr(

"d",

d3.Delaunay.from(data.map(d => [xr(d[0]), yr(d[1])]))

.voronoi([35, 0, width, height - 25])

.render()

)

.attr("fill", "none")

.attr("stroke", "#ccc")

.attr("stroke-width", 0.5);

}

// center the action (handles multitouch)

function center(event, target) {

if (event.sourceEvent) {

const p = d3.pointers(event, target);

return [d3.mean(p, d => d[0]), d3.mean(p, d => d[1])];

}

return [width / 2, height / 2];

}

height = Math.min(500, width * 0.8)

x = d3.scaleLinear()

.domain(d3.extent(data, d => d[0]))

.range([30, width - 10])

.nice()

y = d3.scaleLinear()

.domain(d3.extent(data, d => d[1]))

.range([height - 20, 10])

.nice()

xAxis = (g, scale) => g

.attr("transform", `translate(0,${y(0)})`)

.call(d3.axisBottom(scale).ticks(12))

.call(g => g.select(".domain").attr("display", "none"))

yAxis = (g, scale) => g

.attr("transform", `translate(${x(0)},0)`)

.call(d3.axisLeft(scale).ticks(12 * (height / width)))

.call(g => g.select(".domain").attr("display", "none"))

data = Array.from({length: 100}, () => [100 * Math.random(), Math.random()])

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more