{
const monSvg = d3.create("svg")
.attr("width", "100%")
.attr("height", 400);
while (true) {
const sortedCities = getRandomCities(5).sort((a, b) => b.population - a.population);
const circles = monSvg.selectAll("circle")
.data(sortedCities, d => d.city)
.join(
enter => enter.append("circle")
.attr("cx", (d, i) => (i + 1) * 130)
.attr("cy", 200)
.attr("r", d => Math.sqrt(d.population) / 10)
.attr("fill", "steelblue"),
update => update
.attr("cx", (d, i) => (i + 1) * 130)
.attr("fill", "yellow"),
exit => exit.remove()
);
const labels = monSvg.selectAll("text")
.data(sortedCities, d => d.city)
.join(
enter => enter.append("text")
.attr("x", (d, i) => (i + 1) * 130)
.attr("y", 300)
.text(d => d.city)
.attr("text-anchor", "middle"),
update => update.attr("x", (d, i) => (i + 1) * 130),
exit => exit.remove()
);
yield monSvg.node();
await Promises.tick(3000);
}
}