Public
Edited
Dec 5, 2022
1 star
map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 600]);
/*The European projection https://spatialreference.org/ref/epsg/3035/ is used:*/
//Defining the projection: you can change the scale and translate to zoom out or zoom more in Portugal
let projection = d3
.geoAzimuthalEqualArea()
.rotate([0, -52])
.scale(5000)
.translate([800, -800]);
let toRadius = function (area) {
return 0.8 * 0.005 * Math.sqrt(area);
};
//country boundaries
svg
.append("g")
.selectAll("path")
.data(topojson.feature(n2jrg, n2jrg.objects.nutsbn).features)
.enter()
.append("path")
.attr("d", d3.geoPath().projection(projection))
.attr("fill", "none")
.attr("stroke", "#f20666");
svg
.append("g")
.selectAll("circle")
.data(n2j.features)
.enter()
.append("circle")
.attr("cx", (f) => projection(f.geometry.coordinates)[0])
.attr("cy", (f) => projection(f.geometry.coordinates)[1])
.attr("r", (f) => toRadius(+sizeDataIndex[f.properties.id]))
.attr("fill", "black");
return svg.node();
}
n2j = (
await fetch(
`https://raw.githubusercontent.com/eurostat/Nuts2json/master/${2016}/4258/nutspt_${3}.json`
)
).json()
ptNuts3 = n2j.features;
ptNuts3Only = idName.filter((d) => {
if (d.id.includes("PT")) {
return d.id;
}
})
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.
