Versor Zooming / D3 | Observable

Bring your data to life.

Workspace

Public

Edited

Oct 24, 2023

Fork of Versor dragging

•

14 forks

Importers

41 stars

chart = {

const context = DOM.context2d(width, height);

const path = d3.geoPath(projection, context);

function render(land) {

context.clearRect(0, 0, width, height);

context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();

context.beginPath(), path(land), context.fillStyle = "#000", context.fill();

context.beginPath(), path(sphere), context.stroke();

}

return d3.select(context.canvas)

.call(zoom(projection)

.on("zoom.render", () => render(land110))

.on("end.render", () => render(land50)))

.call(() => render(land50))

.node();

}

function zoom(projection, {

// Capture the projection’s original scale, before any zooming.

scale = projection._scale === undefined

? (projection._scale = projection.scale())

: projection._scale,

scaleExtent = [0.8, 8]

} = {}) {

let v0, q0, r0, a0, tl;

const zoom = d3.zoom()

.scaleExtent(scaleExtent.map(x => x * scale))

.on("start", zoomstarted)

.on("zoom", zoomed);

function point(event, that) {

const t = d3.pointers(event, that);

if (t.length !== tl) {

tl = t.length;

if (tl > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]);

zoomstarted.call(that, event);

}

return tl > 1

? [

d3.mean(t, p => p[0]),

d3.mean(t, p => p[1]),

Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0])

]

: t[0];

}

function zoomstarted(event) {

v0 = versor.cartesian(projection.invert(point(event, this)));

q0 = versor((r0 = projection.rotate()));

}

function zoomed(event) {

projection.scale(event.transform.k);

const pt = point(event, this);

const v1 = versor.cartesian(projection.rotate(r0).invert(pt));

const delta = versor.delta(v0, v1);

let q1 = versor.multiply(q0, delta);

// For multitouch, compose with a rotation around the axis.

if (pt[2]) {

const d = (pt[2] - a0) / 2;

const s = -Math.sin(d);

const c = Math.sign(Math.cos(d));

q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1);

}

projection.rotate(versor.rotation(q1));

// In vicinity of the antipode (unstable) of q0, restart.

if (delta[0] < 0.7) zoomstarted.call(this, event);

}

return Object.assign(selection => selection

.property("__zoom", d3.zoomIdentity.scale(projection.scale()))

.call(zoom), {

on(type, ...options) {

return options.length

? (zoom.on(type, ...options), this)

: zoom.on(type);

}

});

}

projection = d3[projectionName]().precision(0.1)

height = {

const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);

const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);

projection.scale(projection.scale() * (l - 1) / l).precision(0.2);

return dy;

}

sphere = ({type: "Sphere"})

land50 = FileAttachment("land-50m.json").json().then(world => topojson.feature(world, world.objects.land))

land110 = FileAttachment("land-110m.json").json().then(world => topojson.feature(world, world.objects.land))

versor = require("versor@0.0.4")

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