Public
Edited
Nov 21, 2024
2 forks
6 stars
Also listed in…
Algorithms
Insert cell
Insert cell
Insert cell
Insert cell
k = {
const t0 = performance.now();
const W = 1200;
const density2d = kde.density2d(points, {
bandwidth,
extent: [
[0, W],
[0, W]
],
bins: [W, W]
});

const canvas = DOM.canvas(W, W);
canvas.style.width = `${width / 2 - 10}px`;
canvas.style.height = `${width / 2 - 10}px`;
density2d.heatmap({ canvas, color });
const time = performance.now() - t0;
return Object.assign(canvas, { time });
}
Insert cell
b = {
const t0 = performance.now();
const W = 1200;
const data = new Float64Array(W * W);
for (const p of points) data[Math.floor(p[0]) + W * Math.floor(W - p[1])]++;
d3.blur2({ data, width: W }, bandwidth);
const canvas = heatmap(data, {
width: W,
upscale: (width / 2 - 10) / W,
color
});
const time = performance.now() - t0;
return Object.assign(canvas, { time });
}
Insert cell
kde = require("fast-kde@0.2")
Insert cell
k.time
Insert cell
b.time
Insert cell
import { heatmap } from "@fil/heatmap"
Insert cell
color = d3.scaleLinear().domain([0, 1]).range(["#000000", "#FFFFFF"])
Insert cell
Insert cell

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