An introduction to striped circle symbolMain causes of death in EuropeElection map as striped circles #1Cartographie de l'élection présidentielle 2022 au niveau communalElection map as Dorling striped circles - municipality levelInitial tests on striped circle symbol
Election map as striped circles #2
Also listed in…
Observable's Instagram Shares
{
//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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.