import { geoPath, geoMercator, select } from "d3";
const width = 800;
const height = 500;
const svg = select(DOM.svg(width, height))
.attr("viewBox", [0, 0, width, height])
.style("border", "1px solid black");
const projection = geoMercator()
.scale(1000)
.translate([width / 2, height / 2]);
const pathGenerator = geoPath().projection(projection);
const colorMap = {
"Cruise": "#ff0000",
"Waymo": "#0000ff",
"Tesla": "#008000"
};
svg.selectAll("path")
.data(geoData.features)
.join("path")
.attr("d", pathGenerator)
.attr("fill", d => colorMap[d.properties.company] || "#888888")
.attr("stroke", "#000")
.attr("stroke-width", 1);
svg.selectAll("text")
.data(geoData.features)
.join("text")
.attr("x", d => {
const centroid = pathGenerator.centroid(d);
return centroid[0];
})
.attr("y", d => {
const centroid = pathGenerator.centroid(d);
return centroid[1];
})
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "#000")
.text(d => `${d.properties.city} - ${d.properties.company}`);
svg.node();