Dataviz at Office for National Statistics (UK)
{
map.addSource("countries", {
type: "geojson",
data: reprojectedCountries
});
map.addLayer({
id: "countries-fill",
type: "fill",
source: "countries",
layout: {},
paint: {
"fill-color": "steelblue",
"fill-opacity": 0.7
}
});
map.addLayer({
id: "countries-line",
type: "line",
source: "countries",
layout: {},
paint: {
"line-color": "steelblue",
"line-opacity": 1
}
});
}
esriCountries = FileAttachment("World_Countries_esri.geojson").json()
d3 = require("d3-array@3", "d3-geo@3", "d3-geo-projection@4", "d3-geo-polygon@1.8")
newProj = d3.geoMollweide()
mercatorProj = d3.geoMercator()
reprojectPoint = ([x, y]) => {
let [xNew, yNew] = newProj([x, y]);
return mercatorProj.invert([xNew / 2 + 100, yNew / 2 + 100]);
}
function reprojectPolygon(polygon) {
// This modifies the coordinates of the polygon
for (let ring of polygon) {
for (let i = 0; i < ring.length; i++) {
ring[i] = reprojectPoint(ring[i]);
}
}
}
reprojectedCountries = {
let result = JSON.parse(JSON.stringify(esriCountries));
let hasMulti = false;
for (let feature of result.features) {
let geom = feature.geometry;
if (geom.type == "Polygon") {
reprojectPolygon(geom.coordinates);
} else if (geom.type == "MultiPolygon") {
for (let polygon of geom.coordinates) {
reprojectPolygon(polygon);
}
} else {
throw "Unexpected geometry type";
}
}
return result;
}
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.
