map = () => {
const delay0 = 300;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "#333");
const path = d3.geoPath(projection);
const color = d3.scaleOrdinal(d3.shuffle(d3.schemeSet1));
const gGraph = svg
.append("g")
.style("stroke", "white")
.style("stroke-width", 0.125);
gGraph
.append("path")
.datum({
type: "MultiLineString",
coordinates: edges.map(({ u, v }) => [
coordinates(nodesIndex.get(u)),
coordinates(nodesIndex.get(v))
])
})
.attr("d", path);
svg
.append("g")
.attr("opacity", 0.7)
.selectAll("path")
.data(d3.range(nodes.length))
.join("path")
.attr("d", (i) =>
tree.predecessor[i] === -1
? null
: path({
type: "LineString",
coordinates: [
coordinates(nodes[tree.predecessor[i]]),
coordinates(nodes[i])
]
})
)
.attr("stroke", (i) => color(tree.origin[i]))
.attr("opacity", 0)
.attr("stroke-dasharray", [0, 1000])
.transition()
.delay((i) => delay0 + tree.cost[i])
.attr("opacity", 1)
.attr("stroke-dasharray", (i) =>
tree.predecessor[i] === -1
? []
: [(tree.cost[i] - tree.cost[tree.predecessor[i]]) / 10, 1000]
);
const gNodes = svg.append("g");
const sorted = d3.sort(d3.range(nodes.length), (i) => tree.cost[i]);
path.pointRadius(2);
gNodes
.selectAll("path")
.data(d3.range(nodes.length))
.join("path")
.attr("d", (i) =>
path({
type: "Point",
coordinates: coordinates(nodes[i])
})
)
.attr("fill", (i) => color(tree.origin[i]))
.attr("opacity", 0)
.transition()
.delay((i) => delay0 + tree.cost[i])
.duration(1000)
.attr("opacity", 1);
path.pointRadius(5);
svg
.append("g")
.selectAll("path")
.data(origins)
.join("path")
.attr("d", (i) =>
path({
type: "Point",
coordinates: coordinates(nodes[i])
})
)
.attr("stroke", "#ddd")
.attr("fill", (i) => color(tree.origin[i]));
svg
.append("g")
.attr("transform", "translate(20, 40)")
.append("text")
.text(`${city}, Hokkaido`)
.style("fill", "#ddd")
.style("font-family", "sans-serif")
.style("font-size", "22px");
svg
.append("g")
.attr("transform", "translate(20, 65)")
.append("text")
.text(
`${nodes.length.toLocaleString()} nodes / ${edges.length.toLocaleString()} edges`
)
.style("fill", "#ccc")
.style("font-family", "sans-serif")
.style("font-size", "15px");
return svg.node();
}