{
//draw background regions
gRegions
.selectAll("path")
.data(deptGeoms.features)
.enter()
.append("path")
.attr("fill", "#fbfbfb")
.attr("stroke", "#444")
.attr("stroke-width", "0.2")
.attr("d", path);
}
circles = gCircles
.selectAll("circle")
.data(points)
.enter()
.append("circle")
.attr("cx", (f) => f.cgeom[0])
.attr("cy", (f) => f.cgeom[1])
.attr("fill", (f) => "url(#pattern" + f.code + ")")
.attr("stroke", "#666")
.attr("stroke-width", "1")
.on("mouseover", function (e, f) {
d3.select(this).attr("stroke", "#333").attr("stroke-width", "3");
gD.selectAll("*").remove();
const res = resDepI[f.code];
gD.append("text").text(res.nom).style("font-weight", "bold");
for (let i = 0; i < 2; i++) {
gD.append("text")
.text(candidates[i] + " - " + res.perc[i].toFixed(1) + " %")
.attr("x", 0)
.attr("y", 20 + 20 * i);
}
gD.attr("visibility", "visible");
})
.on("mouseout", function () {
d3.select(this).attr("stroke", "#666").attr("stroke-width", "1");
gD.attr("visibility", "hidden");
})
circles.attr("r", (f) => toRadius(resDepI[f.code]["Exprimés"]))
toRadius = (nb) => {
return (circleExaggerationFactor * Math.sqrt(nb)) / 30;
}
{
//clean
svg.select("defs").selectAll("*").remove();
for (const p of points) {
//get election data
const res = resDepI[p.code];
//get circle radius
const r = toRadius(res["Exprimés"]);
//make pattern
sc.makeCircleStripePattern(
"electionMap",
"pattern" + p.code,
2 * r,
res.perc,
colors
);
}
}
{
//clean
gLegend.selectAll("*").remove();
gLegend.attr("transform", "translate(30,370)").style("font-size", 15);
const r = toRadius(500000);
gLegend
.append("circle")
.attr("cx", r)
.attr("cy", r)
.attr("r", r)
.attr("fill", "none")
.attr("stroke", "gray");
gLegend
.append("text")
.text("500 000 votes")
.attr("x", 2 * r + 5)
.attr("y", r + 5);
for (let i = 0; i < 2; i++) {
gLegend
.append("rect")
.style("fill", colors[i])
.attr("x", 0)
.attr("y", 2 * r + 10 + 20 * i)
.attr("width", 20)
.attr("height", 15);
gLegend
.append("text")
.text(candidates[i])
.attr("x", 25)
.attr("y", 2 * r + 10 + 13 + 20 * i);
}
}
{
const simulation = d3
.forceSimulation(points)
.force(
"x",
d3.forceX().x((f) => f.cgeom[0])
)
.force(
"y",
d3.forceY().y((f) => f.cgeom[1])
)
.force(
"collide",
d3
.forceCollide()
.radius((f) => collisionPadding + toRadius(resDepI[f.code]["Exprimés"]))
);
//set initial position of the circles
for (const f of points) {
f.x = f.cgeom[0];
f.y = f.cgeom[1];
}
simulation.on("tick", () => {
circles.attr("cx", (f) => f.x).attr("cy", (f) => f.y);
});
invalidation.then(() => simulation.stop());
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@6")
topojson = require("topojson")
sc = require("stripedcircle@0.9.7")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
