An introduction to striped circle symbolMain causes of death in EuropeElection 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 level
Initial tests on striped circle symbol
FileAttachment("karim_douieb_2019-Oct-20b.jpg").image()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
html`
<svg width="200" height="120">
<defs>
<pattern id="pattern1" x="0" y="0" width="1" height="1" patternUnits="objectBoundingBox" patternTransform="rotate(${orientation1}, 60, 60)">
<rect x="0" y="0" width="${class1}" height="100" style="fill: #66c2a5;" />
<rect x="${class1}" y="0" width="${class2}" height="100" style="fill: #fc8d62;" />
<rect x="${class1 + class2}" y="0" width="${100 -
class1 -
class2}" height="100" style="fill: #8da0cb;" />
</pattern>
</defs>
<circle cx="60" cy="60" r=50
style="stroke: #000000; fill: url(#pattern1);" />
</svg>
`
//TODO document
makePattern = function(
svg,
id,
width,
percentages,
colors,
orientation,
centerX,
centerY
) {
let defs = svg.select("defs");
if (defs.size() === 0) defs = svg.append("defs");
const pattern = defs
.append("pattern")
.attr("id", id)
.attr("patternUnits", "objectBoundingBox")
.attr("width", 1)
.attr("height", 1)
.attr(
"patternTransform",
"rotate(" + orientation + "," + centerX + "," + centerY + ")"
);
var cum = 0;
for (var i = 0; i < percentages.length; i++) {
//TODO real X computation needed
var w = width * 0.01 * percentages[i];
pattern
.append("rect")
.attr("x", cum)
.attr("y", 0)
.attr("width", w)
.attr("height", width)
.attr("fill", colors[i]);
cum += w;
}
}
{
const height = 100;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let x = 10;
for (var i = 0; i < nb; i++) {
x += radius[i];
makePattern(
svg,
"patt" + i,
2 * radius[i],
breakdowns[i],
colors,
orientation2,
x,
height * 0.5
);
svg
.append("circle")
.attr("cx", x)
.attr("cy", height * 0.5)
.attr("r", radius[i])
.attr("fill", "url(#patt" + i + ")")
.attr("stroke", "#000a");
x += radius[i] + 10;
}
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
nb = 15
radius = Array.from({ length: nb }, () => 5 + 25 * Math.random())
breakdowns = Array.from({ length: nb }, () => {
const sh1 = 10 + 25 * Math.random(),
sh2 = 20 + 40 * Math.random(),
sh3 = 100 - sh1 - sh2;
return [sh1, sh2, sh3];
})
colors = ["#66c2a5", "#fc8d62", "#8da0cb"]
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.