Public
Edited
Mar 22, 2023
topojson = require("topojson")
world = d3.json(
"https://gist.githubusercontent.com/olemi/d4fb825df71c2939405e0017e360cd73/raw/d6f9f0e9e8bd33183454250bd8b808953869edd2/world-110m2.json"
)
map = {
const svg = d3.select(DOM.svg(width, width / 1.6));
const projection = d3.geoMercator().center([0, 30]).scale(200).rotate([0, 0]);
const path = d3.geoPath().projection(projection);
const g = svg.append("g");
// world map
g.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "#999");
// zoom and pan
// const zoom = d3.zoom().on("zoom", () => {
// g.attr("transform", d3.event.transform);
// g.selectAll("circle").attr("d", path.projection(projection));
// g.selectAll("path").attr("d", path.projection(projection));
// });
// svg.call(zoom);
return svg.node();
}
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.
