Public
Edited
Nov 15, 2023
Insert cell
Insert cell
map1 = {
const projection = d3.geoEqualEarth().rotate([-10, 0, 0]);
const path = d3.geoPath().projection(projection);

const svg = d3.select(DOM.svg(container.width, container.height));

const color = d3
.scaleOrdinal()
.domain([
"North America",
"Asia",
"Oceania",
"South America",
"Europe",
"Africa"
// 'Antarctica'
])
.range(d3.schemeTableau10);

continents.forEach((continent) => {
svg
.append("g")
.selectAll("path")
.data(continent)
.enter()
.append("path")
.attr("d", path)
.style("fill", "none")
//.style("fill", (d) => color(d.properties.continent))
.style("stroke", "black")
.style("stroke-width", "1px");
});

return svg.node();
}
Insert cell
continents = d3.group(world.features, (d) => d.properties.continent)
Insert cell
world = FileAttachment("world@2.json").json()
Insert cell
container = ({ width: 1000, height: 600 })
Insert cell
d3 = require("d3@v7")
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