30:T808,html` `31:T41f,makePattern = function ( svg, id, size, percentages, colors, orientation = 0, rotationPos = null, withCorrection = true ) { 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); //set orientation if (orientation) { rotationPos = rotationPos || [0, 0]; pattern.attr( "patternTransform", "rotate(" + orientation + "," + rotationPos[0] + "," + rotationPos[1] + ")" ); } //specify stripes let cumPer = 0, x0 = 0; const corr = withCorrection ? d : (x) => x; for (let i = 0; i < percentages.length; i++) { cumPer += percentages[i] * 0.01; const x1 = size * corr(cumPer); pattern .append("rect") .attr("x", x0) .attr("y", 0) .attr("width", x1 - x0) .attr("height", size) .attr("fill", colors[i]); x0 = x1; } }32:[] 2e:{"title":"An introduction to striped circle symbol","cells":[{"id":0,"value":"# An introduction to striped circle symbol\n\n*This is a first article introducing [striped circles](https://observablehq.com/collection/@jgaffuri/striped-circles).*\n\nTo visualise numerical proportions, the most popular solution is certainly the *pie chart*. Other solutions exist, such as the ones shown below, for 3 categories green/red/purple. These solutions share a common characteristic: The more important a proportion, the larger the area of the corresponding color.","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"viewof class0 = Inputs.range([0, 100], {\n label: \"Green (%)\",\n step: 1,\n value: 45\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"viewof class1 = Inputs.range([0, 100 - class0], {\n label: \"Red (%)\",\n step: 1,\n value: 35\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"Purple (%), the rest:","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"class2 = 100 - class0 - class1","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"Such symbols can be used for various visualisations such as [this map on causes of death in Europe](https://observablehq.com/@joewdavies/mapping-with-pie-charts-most-common-causes-of-death-in-europ) or [this one on French population by age](https://eurostat.github.io/gridviz/test_canvas/test/F2015_ind_by_age.html).","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"We focus here on another type of symbol for showing proportions: **striped circle**. It shows the proportions as stripes on a circle, as shown on the example below:","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"Striped circles have some good advantages compared to pie charts, such as the possiblility to order the categories (from left to right for example) or to use the stripe orientation to show another variable.\n","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"viewof orientation1 = Inputs.range([-180, 180], {\n label: \"Orientation\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"Like the previous solutions, striped circle need to preserve the color proportions, so that the quantity of each color map the corresponding proportion. A **naive** solution is to assign each stripe with a width directly proportional to the proportion of the corresponding category. This simple solution is unfortunatelly **not correct**, since the stripes close to the circle outline will appear less important than the ones closer to the center. The stripe width is not a linear function of the corresponding percentage value. This (little) challenge is addressed in the next sections below.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"# Circular segment area\n\nTo assign the correct width to each stripe, we need to consider [the area of the circular segment](https://en.wikipedia.org/wiki/Circular_segment) as represented in green:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":72,"value":"This area can be expressed as a function of the stripe width **h** as:","pinned":false,"hidden":false,"mode":"md"},{"id":765,"value":"A = R^2/2 * (\\theta - sin(\\theta))","pinned":false,"hidden":false,"mode":"tex"},{"id":770,"value":"with `\\theta` as:","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"cos(\\theta/2) = 1-h/R","pinned":false,"hidden":false,"mode":"tex"},{"id":76,"value":"**For our case, we need to express *h* as function of the area *A* **.\n\nNote this could be compared with a more concrete real world problem: Imagine you have a long cylindrical tank lying horizontaly on the ground, to be pourred with a known quantity of water (or wine). This formula will give the water level from the pipe radius and the water quantity.","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"## Inversion\n\nTo express **h** as function of the area **A**, we need first to express **theta** as a function of **A**. Knowing that:\n","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"\\theta-sin(\\theta) = 2*A/R²","pinned":false,"hidden":false,"mode":"tex"},{"id":793,"value":"we need to invert the function *f(x) = x-sin(x)*","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"f = (theta) => theta - Math.sin(theta)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"Such invert function has no algebric solution, but for our case, a reasonable approximation as provided on [math.stackexchange.com](https://math.stackexchange.com/questions/3559586/circular-segment-area-inverse-function-invert-function-of-x%e2%88%92sinx/3653155#3653155) is acceptable:","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"frec = (v) => {\n const t = Math.pow(6 * v, 1 / 3);\n const t2 = t * t;\n const t4 = t2 * t2;\n const t6 = t4 * t2;\n return (\n (t * (1 - (1267 / 9428) * t2 + (31 / 6507) * t4 - (1 / 32473) * t6)) /\n (1 - (2251 / 14902) * t2 + (63 / 9593) * t4 - (1 / 13890) * t6)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"## Approximation check\nWe can check here the result of the composition of the function with its invert, which should behave as the identity function:","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"viewof x = Inputs.range([0, 1], {\n label: \"x\",\n step: 0.01,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"f(frec(x)) - x","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"frec(f(x)) - x","pinned":true,"hidden":false,"mode":"ojs"},{"id":824,"value":"The results obtained here are really small for our range of values: The approximation is sufficient.","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"## The correction function","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"Here is the correction function to be used to compute the stripe widths:","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"d_ = (perc) => {\n const theta = frec(perc * 2 * Math.PI);\n return 0.5 * (1 - Math.cos(theta / 2));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"d = (perc) => {\n if (perc > 0.5) return 1 - d_(1 - perc);\n return d_(perc);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"value":"This shows how the function behaves, for percentage values within [0,1]:","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"Plot.plot({\n x: {\n grid: true\n },\n y: {\n grid: true\n },\n marks: [Plot.line(points)]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"points = {\n const out = [];\n for (let x = 0; x < 1; x += 0.0001) out.push([x, d(x)]);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"We can observe that values close to 0 and 1 are exaggerated, which is the expected behaviour, while the function is close to the identity around the value 0.5, as expected.","pinned":false,"hidden":false,"mode":"md"},{"id":1125,"value":"The error, compared to using the width as a linear function of the percentage, is shown below:","pinned":false,"hidden":false,"mode":"md"},{"id":1122,"value":"Plot.plot({\n x: {\n grid: true\n },\n y: {\n grid: true\n },\n marks: [Plot.line(pointsErr)]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"pointsErr = {\n const out = [];\n for (let x = 0; x < 1; x += 0.0001) out.push([x, d(x) - x]);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"The error varies from 0 to **around 6%** for values around 0.13 and 0.87.","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"# Final result with comparison","pinned":false,"hidden":false,"mode":"md"},{"id":869,"value":"Here are few examples which can be shown with or without the correction:","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"viewof withCorrection = Inputs.toggle({\n label: \"With correction:\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"Some examples, with random proportions and sizes:","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"{\n const height = 100;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n let x = 10;\n for (var i = 0; i < nb; i++) {\n x += radius[i];\n\n makePattern(\n svg,\n \"patt\" + i,\n 2 * radius[i],\n breakdowns[i],\n colors,\n orientation2,\n [x, height * 0.5],\n withCorrection\n );\n\n svg\n .append(\"circle\")\n .attr(\"cx\", x)\n .attr(\"cy\", height * 0.5)\n .attr(\"r\", radius[i])\n .attr(\"fill\", \"url(#patt\" + i + \")\")\n .attr(\"stroke\", \"#000a\");\n\n x += radius[i] + 10;\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"viewof orientation2 = Inputs.range([-180, 180], {\n label: \"Orientation\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"Another example with custom proportions:","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"viewof break1 = Inputs.range([0, 100], {\n label: \"Break 1 (%)\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"viewof break2 = Inputs.range([break1, 100], {\n label: \"Break 2 (%)\",\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"{\n const radius = 100;\n const padding = 5;\n const height = 2 * radius + 2 * padding;\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const data_ = [break1, break2 - break1, 100 - break2];\n makePattern(\n svg,\n \"pattXXX\",\n 2 * radius,\n data_,\n colors,\n orientation2,\n [padding + radius, padding + radius],\n withCorrection\n );\n\n svg\n .append(\"circle\")\n .attr(\"cx\", padding + radius)\n .attr(\"cy\", height * 0.5)\n .attr(\"r\", radius)\n .attr(\"fill\", \"url(#pattXXX)\")\n .attr(\"stroke\", \"#000a\");\n\n svg\n .append(\"text\")\n .attr(\"x\", 3 * padding + 2 * radius)\n .attr(\"y\", padding + radius)\n .text(\n \"Green \" +\n data_[0] +\n \"% | Red \" +\n data_[1] +\n \"% | Purple \" +\n data_[2] +\n \"%\"\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"# Use it !\n\nFor some examples of visualisations using striped circles, see [this collection](https://observablehq.com/collection/@jgaffuri/striped-circles).\n\nSee also the dedicated [StripedCircle library](https://github.com/jgaffuri/StripedCircle/) for faster reuse.","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"# Annex","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"colors = [\"#66c2a5\", \"#fc8d62\", \"#8da0cb\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"data = [class0, class1, class2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"## Pie chart","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"makePieChart = function () {\n const g = d3.select(\"#pc\");\n g.attr(\"transform\", \"translate(\" + 60 + \",\" + 60 + \")\");\n g.selectAll(\"*\").remove();\n const pie = d3.pie();\n pie.sort(undefined);\n const arc = d3.arc().innerRadius(0).outerRadius(50);\n const arcs = g\n .selectAll(\"arc\")\n .data(pie(data))\n .enter()\n .append(\"g\")\n .attr(\"class\", \"arc\");\n arcs\n .append(\"path\")\n .attr(\"fill\", function (d, i) {\n return colors[i];\n })\n .attr(\"stroke\", \"#333\")\n .attr(\"d\", arc);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"makePieChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"## Radar chart","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"makeRadarChart = function () {\n const g = d3.select(\"#radar\");\n g.attr(\"transform\", \"translate(\" + 60 + \",\" + 60 + \")\");\n g.selectAll(\"*\").remove();\n const a = (2 * Math.PI) / 3;\n\n var arcs = g\n .selectAll(\"arc\")\n .data(data)\n .enter()\n .append(\"g\")\n .attr(\"class\", \"arc\");\n arcs\n .append(\"path\")\n .attr(\"fill\", function (d, i) {\n return colors[i];\n })\n .attr(\"stroke\", \"#333\")\n .attr(\"d\", function (d, i) {\n return d3\n .arc()\n .innerRadius(0)\n .outerRadius(5 * Math.sqrt(d))\n .startAngle(i * a)\n .endAngle((i + 1) * a)();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"makeRadarChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"## Other","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"For the random striped circles","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"nb = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"radius = Array.from({ length: nb }, () => 10 + 35 * Math.random())","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"breakdowns = Array.from({ length: nb }, () => {\n const sh1 = 10 + 25 * Math.random(),\n sh2 = 20 + 40 * Math.random(),\n sh3 = 100 - sh1 - sh2;\n return [sh1, sh2, sh3];\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}