chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("fill", "blue")
.attr("stroke", "rgb(230,230,230)");
const outline = svg.append("path");
const feature = svg.append("path");
function render() {
outline.attr("d", path(sphere));
feature.attr("d", path(land)).attr("fill", "rgb(230,230,230)")
}
return svg
.call(zoom(projection).on("zoom.render end.render", render))
.call(render)
.node();
}
path = geoCurvePath(curve, projection)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
sphere = ({type: "Sphere"})
land = {
let topology = world;
topology = topojson.presimplify(topology);
topology = topojson.simplify(topology, minArea);
return topojson.feature(topology, topology.objects.land);
}
world = FileAttachment("land-110m.json").json()
topojson = require("topojson@3")
d3 = require("d3@6")
import {zoom} from "@d3/versor-zooming"
import {geoCurvePath} from "@d3/context-to-curve"
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.
