Dataviz at Office for National Statistics (UK)
dots = genDots(data)
dots2 = genDots2(data, peoplePerDot)
dots2_10 = genDots2(data, 10)
getProjectedSegments = function (polygon) {
return turf
.lineSegment(polygon)
.features.map((f) => f.geometry.coordinates.map(projection));
}
function genDots(geo) {
// This function is based on code by Ahmad Barclay
let points = { type: "FeatureCollection", features: [] };
for (let polygon of geo.features) {
let bbox = turf.bbox(polygon);
let count = Math.round(polygon.properties.pop / peoplePerDot);
let i = 1;
while (i <= count) {
let point = randomPointInPolygon(polygon, bbox);
point.properties.id =
polygon.properties.item + i.toString().padStart(3, "0");
points.features.push(point);
i++;
}
}
// Shuffle points to avoid plotting one colour on top of the others where there are overlaps
d3.shuffle(points.features);
return points;
}
function genDots2(geo, peoplePerDot) {
let points = { type: "FeatureCollection", features: [] };
for (let polygon of geo.features) {
let bbox = turf.bbox(polygon);
let lineSegments = getProjectedSegments(polygon);
let count = Math.round(polygon.properties.pop / peoplePerDot);
let i = 1;
let projectedPoints = [];
while (i <= count) {
let point = nicePointInPolygon(
polygon,
bbox,
lineSegments,
projectedPoints
);
point.properties.id =
polygon.properties.item + i.toString().padStart(3, "0");
points.features.push(point);
projectedPoints.push(projectPoint(point));
i++;
}
}
// Shuffle points to avoid plotting one colour on top of the others where there are overlaps
d3.shuffle(points.features);
return points;
}
function nicePointInPolygon(polygon, bbox, lineSegments, points) {
let bestDist = -Infinity;
let bestPoint;
let iters = effort * 5;
for (let i = 0; i < iters; i++) {
let p = randomPointInPolygon(polygon, bbox);
let dist = distanceToNearestItem(
projectPoint(p),
lineSegments,
points,
bestDist
);
if (dist > bestDist) {
bestDist = dist;
bestPoint = p;
}
}
return bestPoint;
}
// Based on https://stackoverflow.com/a/1501725/3347737
function pointToLineDistance(p, [v, w]) {
function dist2(v, w) {
let dx = v[0] - w[0];
let dy = v[1] - w[1];
return dx * dx + dy * dy;
}
function distToSegmentSquared(p, v, w) {
var l2 = dist2(v, w);
if (l2 == 0) return dist2(p, v);
var t =
((p[0] - v[0]) * (w[0] - v[0]) + (p[1] - v[1]) * (w[1] - v[1])) / l2;
t = Math.max(0, Math.min(1, t));
return dist2(p, [v[0] + t * (w[0] - v[0]), v[1] + t * (w[1] - v[1])]);
}
return Math.sqrt(distToSegmentSquared(p, v, w));
}
function distanceToNearestItem(point, segments, points, prevBest) {
// Note: distances to segments of the border are multiplied by 2
// Note: as an optimisation, the function returns -1 if result is <= prevBest
let nearest = Infinity;
for (let p of points) {
let dx = point[0] - p[0];
let dy = point[1] - p[1];
if (Math.abs(dx) >= nearest || Math.abs(dy) >= nearest) continue; // a little optimisation
let d = Math.hypot(dx, dy);
if (d < nearest) {
nearest = d;
if (d <= prevBest) return -1;
}
}
for (let segment of segments) {
// Do a few quick checks to try to avoid an expensive pointToLineDistance() call
if (point[0] >= Math.max(segment[0][0], segment[1][0]) + nearest) continue;
if (point[1] >= Math.max(segment[0][1], segment[1][1]) + nearest) continue;
if (point[0] <= Math.min(segment[0][0], segment[1][0]) - nearest) continue;
if (point[1] <= Math.min(segment[0][1], segment[1][1]) - nearest) continue;
let d = pointToLineDistance(point, segment) * edgeSpacing;
if (d < nearest) {
nearest = d;
if (d <= prevBest) return -1;
}
}
return nearest;
}
function randomPointInPolygon(polygon, bbox) {
let point;
do {
point = turf.randomPoint(1, { bbox: bbox }).features[0];
} while (!turf.booleanPointInPolygon(point.geometry.coordinates, polygon));
return point;
}
function idToColourIndex(id, numberOfColours) {
// This is just a made-up function to assign some pretty colours
if (numberOfColours === 1) return 0;
let result = +id[id.length - 4] % numberOfColours;
if (id[id.length - 1] > 6) {
result = (result + +id[id.length - 1]) % numberOfColours;
}
return result;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.