31:[{"id":"60d664043d0497d3c66bd5eb3a7610fc183fd3ff275b4425204c453adf36b8c870a6c058967a5b7b2ed08220b3617c1cc403a40a05c344b3020c8146322de6ad","href":"https://static.observableusercontent.com/files/60d664043d0497d3c66bd5eb3a7610fc183fd3ff275b4425204c453adf36b8c870a6c058967a5b7b2ed08220b3617c1cc403a40a05c344b3020c8146322de6ad","name":"image2020-2-12_12-8-19 (1).png","type":"image/png","lastModified":1582488122132.004,"size":373008},{"id":"c1ea9c2246bd30d63d7ff5f220081529132ec970d0f416aa7e08e995f7d4467b96260c20c46c1ef2e7facd34d4cc8a80647b5a920919197b602488a7d09afd47","href":"https://static.observableusercontent.com/files/c1ea9c2246bd30d63d7ff5f220081529132ec970d0f416aa7e08e995f7d4467b96260c20c46c1ef2e7facd34d4cc8a80647b5a920919197b602488a7d09afd47","name":"karim_douieb_2019-Oct-20b.jpg","type":"image/jpeg","lastModified":1582488122135.653,"size":489677}] 2f:{"title":"Initial tests on striped circle symbol","cells":[{"id":0,"value":"# Initial tests on striped circle symbol\n\n*See also **[HERE](https://observablehq.com/@jgaffuri/striped-circle)***\n\nThis page shows some first tests to implement a Dorling cartogram showing breakdowns by categories using a linear texture composed of colored stripes. Each color hue corresponds to a category and the quantity of color represents the share of the category in the total, just like in a pie chart but with another way of coloring the circles.\n\nHere is a first example from [Karim Douïeb](https://demcastusa.com/2019/11/11/land-doesnt-vote-people-do-this-electoral-map-tells-the-real-story/), showing **two** categories:\n","pinned":false,"hidden":false,"mode":"md"},{"id":668,"value":"FileAttachment(\"karim_douieb_2019-Oct-20b.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`and another one from Jacques Bertin, showing **three** categories. This is not on a circular Dorling cartogram, but the idea is the same: using stripes of different widths to show proportions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"FileAttachment(\"image2020-2-12_12-8-19 (1).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`## Static test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`Here is a first test, as static SVG, showing three categories:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"viewof orientation1 = slider({\n min: -180,\n max: 180,\n step: 1,\n precision: 1,\n value: 45,\n title: \"Pattern orientation\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"viewof class1 = slider({\n min: 0,\n max: 100,\n step: 1,\n precision: 1,\n value: 20,\n title: \"Green share (%)\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"viewof class2 = slider({\n min: 0,\n max: 100 - class1,\n step: 1,\n precision: 1,\n value: 30,\n title: \"Red share (%)\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`## Pattern generation function\n\nHere is a function creating the texture pattern for various percentage values:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"//TODO document\nmakePattern = function(\n svg,\n id,\n width,\n percentages,\n colors,\n orientation,\n centerX,\n centerY\n) {\n let defs = svg.select(\"defs\");\n if (defs.size() === 0) defs = svg.append(\"defs\");\n\n const pattern = defs\n .append(\"pattern\")\n .attr(\"id\", id)\n .attr(\"patternUnits\", \"objectBoundingBox\")\n .attr(\"width\", 1)\n .attr(\"height\", 1)\n .attr(\n \"patternTransform\",\n \"rotate(\" + orientation + \",\" + centerX + \",\" + centerY + \")\"\n );\n var cum = 0;\n for (var i = 0; i < percentages.length; i++) {\n //TODO real X computation needed\n var w = width * 0.01 * percentages[i];\n pattern\n .append(\"rect\")\n .attr(\"x\", cum)\n .attr(\"y\", 0)\n .attr(\"width\", w)\n .attr(\"height\", width)\n .attr(\"fill\", colors[i]);\n cum += w;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`Few random examples using the function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof orientation2 = slider({\n min: -180,\n max: 180,\n step: 1,\n precision: 1,\n value: 45,\n title: \"Pattern orientation\",\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"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,\n height * 0.5\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":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"## Correction\nAn issue with this representation is that the share of each color does not represent fairly the percentage figures, since the colored area is not a linear function of the abscissa along the diameter. The [circular segment area](https://en.wikipedia.org/wiki/Circular_segment) has to be considered.\n\nTo solve this issue, the mathematical function indicated [here](https://math.stackexchange.com/a/3653155/1009) should be used: **[See this notebook](https://observablehq.com/@jgaffuri/striped-circle)**.\n","pinned":false,"hidden":false,"mode":"md"},{"id":621,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"nb = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"radius = Array.from({ length: nb }, () => 5 + 25 * Math.random())","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"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":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"colors = [\"#66c2a5\", \"#fc8d62\", \"#8da0cb\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"import { radio, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}