Published unlisted
Edited
Jul 4, 2022
Insert cell
Insert cell
{
let w = width < 900 ? width : 900;
let lat_min = -60;
let lat_max = 84;
let aspect = (MercatorY(lat_max) - MercatorY(lat_min)) / (2 * Math.PI);
let h = w * aspect;
let pad = 10;
let div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`);

let svg = div.append("svg").attr("width", w).attr("height", h);
let g = svg.append("g");

let x_scale = d3.scaleLinear().domain([-180, 180]).range([0, w]);

let deg = Math.PI / 180;
let y_scale = d3
.scaleLinear()
.domain([MercatorY(lat_min), MercatorY(lat_max)])
.range([h, 0]);
let pts_to_path = d3
.line()
.x((d) => x_scale(d[0]))
.y((d) => y_scale(MercatorY(d[1])));

g.selectAll("path").data(coordinates).join("path").attr("d", pts_to_path);

svg.call(
d3
.zoom()
.scaleExtent([0.5, 8])
.duration(500)
.on("zoom", function (evt) {
g.attr("transform", evt.transform);
})
);

return div.node();
}
Insert cell
function MercatorY(lat) {
let deg = Math.PI / 180;
return Math.log(Math.abs(Math.tan(lat * deg) + 1 / Math.cos(lat * deg)));
}
Insert cell
coordinates = land.features.map((o) => o.geometry.coordinates).flat()
Insert cell
land = {
let land = await FileAttachment("land.json").json();
land = topojson.feature(land, land.objects.land);
return land;
}
Insert cell

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.
Learn more