chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// const zoom = d3.zoom().scaleExtent([1, 9]).on("zoom", zoomed);
const g = svg.append("g");
const defs = svg.append("defs");
defs
.append("path")
.datum({ type: "Sphere" })
.attr("id", "sphere")
.attr("d", path(outline));
defs
.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", "#sphere");
g.append("path").attr("d", path(outline)).attr("fill", "#F6F6FF");
g.attr("clip-path", "url(#clip)");
g.append("path")
.attr("d", path(graticule))
.attr("stroke", "#fff")
.attr("stroke-width", 1, 25)
.attr("fill", "none");
// country outlines
g.append("path")
.attr("d", path(land))
.attr("fill", "#4BADF8")
.attr("stroke", "#fff");
// inner borders
g.append("path")
.attr("d", path(borders))
.attr("fill", "none")
.attr("stroke", "#fff");
// globe outline
g.append("path")
.attr("d", path(outline))
.attr("fill", "none")
.attr("stroke", "#AEAEFF")
.attr("stroke-width", "3px");
// g.selectAll("circle")
// .data(citiesData)
// .enter()
// .append("circle")
// .attr("r", 0.5)
// .attr("fill", (d) =>
// d.country === "India" ? "red" : d.country === "Nepal" ? "blue" : "black"
// )
// .attr("cx", (d) => projection([parseInt(d["lng"]), parseInt(d["lat"])])[0])
// .attr("cy", (d) => projection([parseInt(d["lng"]), parseInt(d["lat"])])[1]);
// svg.append("use").attr("xlink:href", "#sphere");
// svg
// .append("path")
// .datum(graticule)
// .attr("class", "graticule")
// .attr("clip-path", "url(#clip)")
// .attr("d", path);
g.selectAll("text")
.data(citiesData)
.enter()
.append("text")
// .attr("r", 1)
.attr("x", (d) => projection([parseInt(d["lng"]), parseInt(d["lat"])])[0])
.attr(
"y",
(d) => projection([parseInt(d["lng"]), parseInt(d["lat"])])[1] - 2
)
// .text("m/dd/yy")
.text((d) => d.city)
.style("font-size", "2.5px")
.attr("fill", (d) =>
d.country === "India"
? "black"
: d.country === "Nepal"
? "black"
: "black"
)
.attr("text-anchor", "middle");
return svg.node();
}
projection = d3.geoInterruptedMollweideHemispheres()
path = d3.geoPath(projection)
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
citiesDataRaw = FileAttachment("worldcities.csv").csv()
citiesData = citiesDataRaw
// .filter((x) => x.population > 1000000)
d3 = require("d3@6", "d3-geo-projection@3")
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.
