News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Oct 21, 2024
map = () => {
const svg = d3.create("svg")
.attr("width", size)
.attr("height", size)
.style("overflow", "visible");
svg.append("path")
.datum({type: "Sphere"})
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "#c0c0c0");
svg.selectAll(".meridien")
.data(d3.range(-180, 0, interval).map(meridien))
.join("path")
.attr("class", "meridien")
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "lime")
.attr("stroke-width", 3);
svg.selectAll(".parallel")
.data(d3.range(-90, 90, interval).map(parallel))
.join("path")
.attr("class", "parallel")
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "tomato")
.attr("stroke-width", 3);
svg.append("circle")
.datum([0, 90])
.attr("r", 3)
.attr("fill", "tomato")
.attr("transform", d => `translate(${projection(d)})`);
svg.append("path")
.datum(topojson.mesh(landTopo, landTopo.objects.land, (a, b) => a === b))
.attr("d", path)
.attr("stroke", "#666")
.attr("fill", "none");
return svg.node();
}
// viewof interval = Inputs.range([1, 90], {step: 1, value: 1})
interval = {
const s = d3.scaleLinear([-1, 1], [15, 90]);
let i = 0;
while (true) {
yield s(Math.sin(i += 0.01))
}
}
size = Math.min(width, 640)
projection = d3.geoOrthographic()
.rotate([90, -45, 1])
.fitSize([size, size], { type: "Sphere" })
path = d3.geoPath(projection)
meridien = (lon, precision = 1) => ({
type: "MultiLineString",
coordinates: [[
...d3.range(-90, 90 + precision, precision).map(lat => [lon, lat]),
...d3.range(-90, 90 + precision, precision).map(lat => [lon + 180, lat]).reverse()
]]
})
parallel = (lat, precision = 1) => ({
type: "MultiLineString",
coordinates: [d3.range(-180, 180 + precision, precision).map(lon => [lon, lat])]
})
landTopo = FileAttachment("land-110m.json").json()
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.
