chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 960, 600]);
svg.append("path")
.datum(topojson.merge(us, us.objects.lower48.geometries))
.attr("fill", "#ddd")
.attr("d", d3.geoPath());
svg.append("path")
.datum(topojson.mesh(us, us.objects.lower48, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath());
const g = svg.append("g")
.attr("fill", "none")
.attr("stroke", "black");
const dot = g.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${d})`);
svg.append("circle")
.attr("fill", "blue")
.attr("transform", `translate(${data[0]})`)
.attr("r", 3);
let previousDate = -Infinity;
return Object.assign(svg.node(), {
update(date) {
dot
.filter(d => d.date > previousDate && d.date <= date)
.transition().attr("r", 3);
dot
.filter(d => d.date <= previousDate && d.date > date)
.transition().attr("r", 0);
previousDate = date;
}
});
}