mutable transform = d3.zoomIdentity
zoom = d3.zoom().scaleExtent([1, 150])
zoomed = ({ transform }) => {
mutable transform = transform;
let chart = viewof chart.value;
chart.density
.xDomain(transform.rescaleX(xScale).domain())
.yDomain(transform.rescaleY(yScale).domain());
chart.update(xs);
}
{
// Set up the initial zoom transform without triggering the zoom event
chart.canvas.__zoom = mutable transform;
// Attach the zoom transform to the canvas element
d3.select(viewof chart.value.canvas).call(zoom.on("zoom.zoomed", zoomed));
invalidation.then(() => zoom.on("zoom.zoomed", null));
}
xScale = d3.scaleLinear(xDomain, [0, size])
yScale = d3.scaleLinear(yDomain, [size, 0])
// cacheInterpolator speeds up colorization by returning cached {r, g, b} objects
interpolator = cacheInterpolator(d3.interpolateBlues)
size = Math.min(width, 500)
xDomain = [-2.5, 2.5]
yDomain = [-2.5, 2.5]
xs = X.subarray(0, numPoints)
ys = Y.subarray(0, numPoints)
X = Float64Array.from({ length: maxPoints }, rand)
Y = Float64Array.from({ length: maxPoints }, rand)
maxPoints = 1e6
rand = d3.randomNormal(0, 0.75) // Sample coordinates from a normal distribution
d3 = require('d3@6')
comma = d3.format(',')
import { slider } from '@jashkenas/inputs'
import { legend } from '@d3/color-legend'
import {
densityPlot,
pointDensity,
cacheInterpolator
} from '@twitter/density-plot@4159'
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.
