Public
Edited
Feb 14, 2023
Importers
Type HTML, then Shift-Enter. Arrow ↑/↓ to switch modes.
function dot_density(
geojson,
fields,
n_represented = 1,
existing_dots = null,
slack = 3,
existing_index = null
) {
if (existing_dots) {
let dots = [];
let index;
if (existing_index) {
index = existing_index;
} else {
index = new KDBush(existing_dots);
}
for (const feature of geojson.features) {
const points_in_bbox = index
.range(...turf.bbox(feature))
.map((i) => existing_dots[i]);
const points_in_feature = turf
.pointsWithinPolygon(turf.points(points_in_bbox), feature)
.features.map((f) => f.geometry.coordinates);
for (const field of fields) {
const k = randround(feature.properties[field] / n_represented);
if (k > points_in_feature.length + slack) {
throw `Not Enough Points. You asked for ${k} points, but there are only ${points_in_feature.length} existing dots intersecting with this feature. Use an existing dots file with more points or increase your features per dot`;
}
dots = dots.concat(
shuffleArray(points_in_feature)
.slice(0, k)
.map(([x, y]) => ({ x, y, field: field }))
);
}
}
return dots;
} else {
const result = uniform_dot_density(geojson, fields, n_represented);
return d3
.zip(
result.x_array,
result.y_array,
result.field_array.map((i) => fields[i])
)
.map(([x, y, field]) => ({ x, y, field }));
}
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
randround = (val) => Math.floor(val + Math.random())
KDBush = require("kdbush")
turf = require("@turf/turf")
import { dot_density as uniform_dot_density } from "@bmschmidt/dot-density"
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.
