{
console.time("plot");
// Create and configure a plotter with our density estimator and a color scale
let plot = densityPlot(density)
.size([500, 500])
.background("#fff")
// Customize the color scale to linearly map bin counts to an blue color scale.
.color((buf) =>
d3.scaleSequential(
d3.extent(buf),
// cacheInterpolator speeds up colorization by returning cached {r, g, b, opacity} objects
cacheInterpolator(d3.interpolateBlues)
)
);
let ret = plot(xs);
console.timeEnd("plot");
return ret;
}
// Create and configure a density estimator for our data
density = pointDensity(nBins, nBins)
.x(d => d)
.y((d, i) => ys[i])
// Specify the x and y domains that we'd like to plot
.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 {
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.
