vote_map_animation = {
var path = d3.geoPath(projection);
var svg = d3.create("svg")
.attr("width", width )
.attr("height", height);
return Promise.all([municipalities, election_results, centroids]).then(
([a, b, c]) => {return ready(municipalities, election_results, centroids);} );
function ready(col_mpio, election_results, centroids) {
const g = svg.append("g")
g.selectAll("path")
.data(topojson.feature(col_mpio, col_mpio.objects.col_mpio).features)
.enter()
.append("path")
.attr("class", "municipalities")
.attr("d", path)
.style("fill", d => get_color(d))
.style("stroke", "white")
.style("stroke-width", "0.5");
setInterval(() => {
svg
.selectAll(".municipalities")
.transition()
.delay((d) => {
try{
return get_municipio(d).index * 2;
}
catch (error) {
console.log(d);
}
})
.duration(5000)
.attrTween("d", function (d, i) {
try {
var municipio = get_municipio(d);
return flubber.toCircle(path(d), municipio.x, municipio.y, radiusScale(parseInt(municipio["Población Total"])), {
maxSegmentLength: 2
});
} catch (error) {
console.log(d);
}
});
svg
.selectAll(".municipalities")
.transition()
.delay((d) => {
try{
return get_municipio(d).index * 2 + 10000
}
catch (error) {
console.log(d);
}
})
.duration(5000)
.attrTween("d", function (d, i) {
try {
var municipio = get_municipio(d);
return flubber.fromCircle(municipio.x, municipio.y, radiusScale(parseInt(municipio["Población Total"])), path(d), {
maxSegmentLength: 2
});
} catch (error) {
console.log(d);
};
});
}, 22000);
return md`You may have to wait a minute for the animation below to start: ${svg.node()}`;
}
}