{
let container = htl.html`<div>`;
let projection = d3
.geoOrthographic()
.rotate([180, 0])
.fitSize([width, 500], { type: "Sphere" });
let render = () => {
let ele = plot(projection);
ele.style.pointerEvents = "none";
container.replaceChildren(ele);
};
return d3
.select(container)
.call(drag(projection).on("drag.render end.render", render))
.call(render)
.node();
}
plot = (projection) =>
Plot.marks([
Plot.geo(poly, {
fill: (d) => d.properties.site.offset,
stroke: "#fff",
strokeOpacity: 0.2,
strokeWidth: 3
}),
Plot.geo(land110, { fill: "#000", opacity: 0.75 }),
Plot.graticule(),
Plot.geo(geographic_lines, { stroke: "#fff", strokeWidth: 2 })
]).plot({
marks: [Plot.sphere()],
projection,
color: {
type: "diverging",
scheme: "turbo",
legend: true,
symmetric: false,
label: "Offset (hours)"
},
width,
height: 500
})
geographic_lines = d3.json(
"https://cdn.jsdelivr.net/gh/martynafford/natural-earth-geojson/110m/physical/ne_110m_geographic_lines.json"
)
import { drag, land110 } from "@d3/versor-dragging"
import { poly } from "6cae876aed1daa2a"
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.
