Public
Edited
Feb 4, 2023
1 fork
3 stars
plotOnBubbleMap(mapGeojson, dataGeojson, { maxRadius, avoidOverlapping, showTitle })
function plotOnBubbleMap(
mapGeo,
dataGeo = { features: [] },
{
width,
height,
titleFontSize = 8,
titleFontWeight = "normal",
title = (d) => {
const {
properties: {
tags: { name },
__pointsCount
}
} = d;
return name == null ? __pointsCount : `${name}\n${__pointsCount}`;
},
maxRadius = 40,
showTitle = true,
avoidOverlapping = false // ⚠️ takes time to render
} = {}
) {
const data = aggregateFeaturesData(mapGeo, dataGeo);
return BubbleMap(data.features, {
width,
height,
titleFontSize,
titleFontWeight,
features: mapGeo,
borders: mapGeo,
value: (d) => d.properties.__pointsCount,
position: (d) => d.properties.__center,
title,
showTitle,
maxRadius,
avoidOverlapping
});
}
function aggregateFeaturesData(mapGeo, dataGeo) {
let centroids = mapFeatures(dataGeo, (f) => {
if (turf.getType(f) === "Point") return f;
const p = turf.centroid(f, { properties: f.properties });
return p;
});
centroids = turf.featureCollection(centroids);
const allowedShapes = ["Polygon", "MultiPolygon"];
let updatedMapGeo = mapFeatures(mapGeo, (f) => {
if (allowedShapes.includes(turf.getType(f))) {
const geo = turf.pointsWithinPolygon(centroids, f);
f.properties.__pointsCount = geo.features?.length || 0;
f.properties.__center = turf.getCoord(turf.center(f));
}
return f;
});
updatedMapGeo=updatedMapGeo.filter(d => d.properties.__pointsCount)
return turf.featureCollection(updatedMapGeo);
}
function mapFeatures(geo, fn = (d) => d) {
return turf.featureReduce(geo, (acc, curr, index) => [...acc, fn(curr, index, geo)], []);
}
dataGeojson = dataGeojsonFile ? dataGeojsonFile.json() : FileAttachment("bangalore.parks.json").json()
mapGeojson = mapGeojsonFile ? mapGeojsonFile.json() : FileAttachment("bangalore.bbmp-zones.json").json()
fileFormats = ".json,.geojson"
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.
