An introduction to striped circle symbolElection map as striped circles #1Election map as striped circles #2Cartographie de l'élection présidentielle 2022 au niveau communalElection map as Dorling striped circles - municipality levelInitial tests on striped circle symbol
Main causes of death in Europe
{
//clean
svg.select("defs").selectAll("*").remove();
for (const f of points) {
const nc = f.properties.id;
const d = ICDdata[nc];
if (!d) continue;
sc.makeCircleStripePattern(
"map",
"patt_" + nc,
2 * toRadius(+sizeInd[nc]),
icdCodes.map((c) => d[c]),
ICDcolors,
orientation,
[f.x, f.y],
correction
);
}
}
circles = {
//add circles
const circles = gCircles
.selectAll("circle")
.data(points)
.enter()
.append("circle")
.attr("cx", (f) => projection(f.geometry.coordinates)[0])
.attr("cy", (f) => projection(f.geometry.coordinates)[1])
.attr("fill", (f) => "url(#patt_" + f.properties.id + ")")
.attr("stroke", "#666")
.attr("stroke-width", "1")
.on("mouseover", function (e, rg) {
d3.select(this).attr("stroke", "#333").attr("stroke-width", "3");
gD.selectAll("*").remove();
gD.append("text").text(rg.properties.na).style("font-weight", "bold");
for (let i = 0; i < icdCodes.length; i++) {
const c = icdCodes[i];
gD.append("text")
.text(c + " - " + ICDdata[rg.properties.id][c].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");
});
return circles;
}
toRadius = function (val) {
return circleExaggerationFactor * 0.05 * Math.sqrt(val) || 0;
}
circles.attr("r", (f) => toRadius(+sizeInd[f.properties.id]))
{
const path = d3.geoPath().projection(projection);
//clean
gRegions.selectAll("*").remove();
gRegions
.selectAll("path")
.data(regions)
.enter()
.append("path")
.attr("d", path)
//.on("mouseover", function (rg) { d3.select(this).style("fill", "lightgray"); })
//.on("mouseout", function () {d3.select(this).style("fill", "white");})
.style("stroke", "#bbb")
.style("stroke-width", "0.8px")
.style("fill", "white");
}
{
const simulation = d3
.forceSimulation(points)
.force(
"x",
d3.forceX().x((f) => projection(f.geometry.coordinates)[0])
)
.force(
"y",
d3.forceY().y((f) => projection(f.geometry.coordinates)[1])
)
.force(
"collide",
d3
.forceCollide()
.radius((f) => collisionPadding + toRadius(+sizeInd[f.properties.id]))
);
//set initial position of the circles
for (const f of points) {
f.x = projection(f.geometry.coordinates)[0];
f.y = projection(f.geometry.coordinates)[1];
}
simulation.on("tick", () => {
circles.attr("cx", (f) => f.x).attr("cy", (f) => f.y);
});
invalidation.then(() => simulation.stop());
}
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.
