density = {
let w = Math.min(675, width);
return pointDensity(w, Math.round(w / 1.5))
.xDomain([-3.5, 3.5])
.yDomain([-2.25, 2.25]);
}
color = d3.scaleDivergingLog(
[0.1, 1, 10],
// cacheInterpolator speeds up colorization by returning cached {r, g, b} objects
cacheInterpolator(d3.interpolateRdBu)
)
maxPoints = 1e6
stdev = 0.5
// Smooth the fraction a / b towards x with strength α
smooth = (a, b, x, α) => (a + x * α) / (b + α)
rand = d3.randomNormal(0, stdev) // Sample coordinates from a normal distribution
dataA = allDataA.slice(0, Math.round(numPoints / 2))
dataB = allDataB.slice(0, Math.round(numPoints / 2))
allDataA = generate(Math.ceil(maxPoints / 2), -1)
allDataB = generate(Math.ceil(maxPoints / 2), 1)
generate = (length, sign) =>
Array.from({ length }, () => [rand() - sign * .5 * stdev * offset, rand()])
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.
