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"]
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.
