projCentroids1 = unrotatedPolygons.features.map((d) => d3.geoCentroid(d))
map = {
const svg = d3.create("svg").attr("width", width).attr("height", height);
const viz = svg.append("g");
const path = d3.geoPath(projection);
const outlinePath = viz
.append("path")
.datum(outline)
.attr("id", "outline")
.attr("stroke", "#aaa")
.attr("opacity", 1)
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr("fill", "#eee")
.attr("d", path)
.attr("pointer-events", "none");
const landPath = viz
.append("g")
.attr("id", "land")
.selectAll("path")
.data(ne_110m_land.features)
.join("path")
.attr("id", (d) => d.properties.formal_en)
.attr("d", path)
.attr("fill", "#fff")
.attr("fill-opacity", 1)
.attr("stroke", "#043B62")
.attr("stroke-alignment", "inner");
const graticulePath = viz
.append("path")
.datum(graticule)
.attr("id", "graticule")
.attr("stroke", "#333")
.attr("opacity", 0.5)
.attr("stroke-width", 0.3)
.attr("fill", "none")
.attr("d", path)
.attr("pointer-events", "none");
const poli = viz
.append("g")
.attr("id", "polygons")
.selectAll("path")
.data(unrotatedPolygons.features)
.join("path")
.attr("d", path)
.attr("fill", "none")
.attr("fill-opacity", 1)
.attr("stroke", "red")
.attr("stroke-alignment", "inner");
const projCentroids = unrotatedPolygons.features.map((d) =>
projection(d3.geoCentroid(d))
);
const northReferences = unrotatedPolygons.features.map((d) => {
let c = d3.geoCentroid(d);
return projection([c[0], c[1] + 10]);
});
const cent = viz
.append("g")
.attr("id", "centroids")
.selectAll("circle")
.data(projCentroids)
.join("circle")
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1])
.attr("r", 5)
.attr("fill", "blue")
.attr("stroke", "none");
viz
.append("g")
.attr("id", "northRefs")
.selectAll("line")
.data(northReferences)
.join("line")
.attr("x1", (d, i) => projCentroids[i][0])
.attr("y1", (d, i) => projCentroids[i][1])
.attr("x2", (d) => d[0])
.attr("y2", (d) => d[1])
.attr("stroke", "black")
.attr("stroke-width", 2);
console.log(projCentroids);
return svg.node();
}
graticule = d3.geoGraticule10()
d3 = require("d3@7.9", "d3-geo@3.1.1", "d3-geo-polygon@2.0.1")
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.
