Published
Edited
Dec 7, 2021
1 fork
Importers
24 stars
contourData = contours()
.size([ow, oh])
.thresholds([150])
(values)
polygonsWithCentroids = contourData[0].coordinates
.map(coordinates => ({
type: 'Feature',
properties: {
centroid: d3.geoPath().centroid({
type: 'Polygon',
coordinates
})
},
geometry: {
type: 'Polygon',
coordinates
}
})).filter(f => d3.geoPath().area(f) > 20)
centroids = ({
type: 'FeatureCollection',
features: polygonsWithCentroids.map(feature => ({
properties: {},
geometry: {
type: 'Point', coordinates: feature.properties.centroid }
}))
})
{
let svg = d3.select(DOM.svg(ow, oh)),
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = {top: 20, right: 30, bottom: 30, left: 40};
svg.selectAll("path.area")
.data(polygonsWithCentroids)
.enter().append("path")
.attr("fill", "#000")
.attr('class', 'area')
.attr("d", d3.geoPath());
svg.selectAll("path.centroid")
.data([centroids])
.enter().append("path")
.attr("fill", "#0ff")
.attr('class', 'centroid')
.attr("d", d3.geoPath().pointRadius(2));
return svg.node();
}
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.
