nrdx = nrd(data.map(d => x(d.x))) / 5
nrdy = nrd(data.map(d => x(d.x))) / 5
// needs https://github.com/d3/d3-array/pull/151
d3ArrayBlur = require("https://files-hpppc9gqy.vercel.app/d3-array.js")
function nrd(x) {
const { ascending, deviation, quantile } = d3;
const sorted = x.slice().sort(ascending);
const r1 = quantile(sorted, 0.25),
r2 = quantile(sorted, 0.75),
h = (r2 - r1) / 1.34,
d = deviation(sorted) || 0;
return 4 * 1.06 * Math.min(d, h) * Math.pow(x.length, -1 / 5);
}
function nrdxy(x, y) {
const minRadius = 20;
return [Math.max(nrd(x), minRadius), Math.max(nrd(y), minRadius)];
}
contourDensity = {
// import {ascending, deviation, max, quantile, range, tickStep} from "d3-array";
const { ascending, deviation, max, quantile, range, tickStep } = d3;
// import {slice} from "./array.js";
const slice = Array.prototype.slice;
// import blur from "./blur.js";
const blur = d3ArrayBlur.blur;
// import constant from "./constant.js";
const constant = x => () => x;
// import contours from "./contours.js";
const contours = d3.contours;
function defaultX(d) {
return d[0];
}
function defaultY(d) {
return d[1];
}
function defaultWeight() {
return 1;
}
return function() {
var x = defaultX,
y = defaultY,
weight = defaultWeight,
dx = 960,
dy = 500,
r = nrdxy,
rx,
ry, // blur radii
n,
m, // grid width, height
ox,
oy, // grid offset, to pad for blur
k = 2, // log2(grid cell size)
pow2k = Math.pow(2, k),
pow_4k = Math.pow(2, -2 * k),
pow_2k = Math.pow(2, -k),
threshold = constant(20);
function density(data) {
if (!data.length) return [];
var vx = new Float32Array(data.length),
vy = new Float32Array(data.length);
for (let i = 0; i < data.length; i++) {
vx[i] = x(data[i], i, data);
vy[i] = y(data[i], i, data);
}
resize(vx, vy);
var grid = new Float32Array(n * m);
for (let i = 0; i < data.length; i++) {
var xi = (vx[i] + ox) * pow_2k,
yi = (vy[i] + oy) * pow_2k,
wi = +weight(data[i], i, data);
if (xi >= 0 && xi < n && yi >= 0 && yi < m) {
var x0 = Math.floor(xi),
y0 = Math.floor(yi),
xt = xi - x0 - 0.5,
yt = yi - y0 - 0.5;
grid[x0 + y0 * n] += (1 - xt) * (1 - yt) * wi;
grid[x0 + 1 + y0 * n] += xt * (1 - yt) * wi;
grid[x0 + 1 + (y0 + 1) * n] += xt * yt * wi;
grid[x0 + (y0 + 1) * n] += (1 - xt) * yt * wi;
}
}
grid = blur()
.radiusX(rx >> k)
.radiusY(ry >> k)
.width(n)(grid);
var tz = threshold(grid);
// Convert number of thresholds into uniform thresholds.
if (!Array.isArray(tz)) {
var stop = max(grid);
tz = tickStep(0, stop, tz);
tz = range(0, Math.floor(stop / tz) * tz, tz);
tz.shift();
}
return contours()
.thresholds(tz)
.size([n, m])(grid)
.map(transform);
}
function transform(geometry) {
geometry.value *= pow_4k; // Density in points per square pixel.
geometry.coordinates.forEach(transformPolygon);
return geometry;
}
function transformPolygon(coordinates) {
coordinates.forEach(transformRing);
}
function transformRing(coordinates) {
coordinates.forEach(transformPoint);
}
function transformPoint(coordinates) {
coordinates[0] = coordinates[0] * pow2k - ox;
coordinates[1] = coordinates[1] * pow2k - oy;
}
function resize(vx, vy) {
var R = r(vx, vy);
(rx = R[0]), (ry = R[1]);
ox = rx * 3;
oy = ry * 3;
n = (dx + ox * 2) >> k;
m = (dy + ox * 2) >> k;
}
density.x = function(_) {
return arguments.length
? ((x = typeof _ === "function" ? _ : constant(+_)), density)
: x;
};
density.y = function(_) {
return arguments.length
? ((y = typeof _ === "function" ? _ : constant(+_)), density)
: y;
};
density.weight = function(_) {
return arguments.length
? ((weight = typeof _ === "function" ? _ : constant(+_)), density)
: weight;
};
density.size = function(_) {
if (!arguments.length) return [dx, dy];
var _0 = Math.ceil(_[0]),
_1 = Math.ceil(_[1]);
if (!(_0 >= 0) && !(_0 >= 0)) throw new Error("invalid size");
return (dx = _0), (dy = _1), density;
};
density.cellSize = function(_) {
if (!arguments.length) return 1 << k;
if (!((_ = +_) >= 1)) throw new Error("invalid cell size");
return (k = Math.floor(Math.log(_) / Math.LN2)), density;
};
density.thresholds = function(_) {
return arguments.length
? ((threshold =
typeof _ === "function"
? _
: Array.isArray(_)
? constant(slice.call(_))
: constant(_)),
density)
: threshold;
};
density.bandwidth = function(_) {
if (!arguments.length) return r;
if (typeof _ === "function") {
r = _;
} else if (Array.isArray(_)) {
var rx = +_[0],
ry = +_[1];
if (!(rx >= 0)) throw new Error("invalid x bandwidth");
if (!(ry >= 0)) throw new Error("invalid y bandwidth");
rx = Math.round((Math.sqrt(4 * rx * rx + 1) - 1) / 2);
ry = Math.round((Math.sqrt(4 * ry * ry + 1) - 1) / 2);
r = constant([rx, ry]);
} else {
if (!((_ = +_) >= 0)) throw new Error("invalid bandwidth");
r = Math.round((Math.sqrt(4 * _ * _ + 1) - 1) / 2);
r = constant([r, r]);
}
return density;
};
return density;
};
}
contour = (!sw ? contourDensity : d3.contourDensity)()
.x(d => x(d.x))
.y(d => y(d.y))
.size([width, height])
.bandwidth(
!sw ? [bw * nrdx, bw * nrdy * ratio] : bw * Math.sqrt(nrdx * nrdy * ratio)
)
.thresholds(100)
contour.bandwidth()
import { checkbox, slider } from "@jashkenas/inputs"
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.
