The avatar for @drio
drio
Builder of things.
Public
Edited
Dec 17, 2023
Fork of Map and Zoom Earth I
Insert cell
Insert cell
Insert cell
{
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");

const g = svg.append("g");

var zoom = d3.zoom().scaleExtent([1, 16]).on("zoom", zoomed);

function zoomed() {
g.attr("transform", d3.event.transform);
}

svg.call(zoom);

g.append("path")
.datum(land)
.attr("d", path)
.attr("class", "land")
.attr("stroke", "black")
.attr("fill", "white");

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projection = d3
.geoNaturalEarth1()
.fitExtent([[0, 0], [width, height]], { type: "Sphere" })
.precision(0.1)
Insert cell
Insert cell
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
world = d3.json(await require.resolve("world-atlas@1/world/50m.json"))
Insert cell
land = topojson.merge(world, world.objects.countries.geometries.filter(d => d.id !== "010"))
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