Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.
centroids = wards.features.map(d => {
const c = d3.geoCentroid(d);
// quick fix: some of the wards have coordinates "reversed" and the centroid is sent to the antipode
// it would be better to "rewind" those polygons with, for example, https://github.com/mapbox/geojson-rewind
if (c[0] < 0) (c[0] += 180), (c[1] *= -1);
return capetownProjection(c);
})
centroidmap = {
d3.select(capetownMapIntro)
.append("g")
.classed("centroids", true)
.selectAll("square")
.data(centroids)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", NODE.MIN_RADIUS)
.attr("opacity", "0.7")
.attr("fill", "red");
return centroids;
}
wardcentroid = d3.selectAll("wards.features").each(function(d, i) {
// .geometry
var centroid = path.d3.geoCentroid(d);
alert('Centroid at: ' + centroid[0] + ', ' + centroid[1]);
})
var features = topojson.feature(world, world.objects.countries).features;
var centroids = features.map(function (feature){
return path.centroid(feature);
});
g.selectAll(".centroid").data(centroids)
.enter().append("circle")
.attr("class", "centroid")
.attr("fill", fill)
.attr("stroke", stroke)
.attr("stroke-width", strokeWidth)
.attr("r", radius)
.attr("cx", function (d){ return d[0]; })
.attr("cy", function (d){ return d[1]; });
// https://bl.ocks.org/curran/55d327542393530662c3
polygonsWithCentroids = wardtest.geometry.coordinates
.map(coordinates => ({
type: 'Feature',
properties: {
centroid: d3.geoPath().centroid({
type: 'Polygon',
coordinates
})
},
geometry: {
type: 'Polygon',
coordinates
}
}))
.filter(f => d3.geoPath().area(f) > 20)
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.
