30:[] 2e:{"title":"Rings - circle with hole mask","cells":[{"id":0,"value":"# Rings - circle with hole mask","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"Here's a demonstration of how this works in static SVG code. The Mask property (named for each for back-reference) is a hole in the outer shape. In this example they are circles, but these could be any svg shape, and it works the same way. \nThe use of black and white in the mask is for controlling the character of the mask. White shows all, black masks all. Anything in between will mask partially (basically opacity of the mask).","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"

\n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":225,"value":"## Implement in D3\nnow we implement this in D3 drawing from a dataset. \nThe **rings** function here draws one ring and it's associated mask, using the outer and inner radii to build the circle and its mask.\n\nFor flexibility, this can be targeted toward a collection of Group elements which can be separately moved around the SVG using transforms. The below code generates a series of these `` elements first, and then for each of those `` elements draws a ring into it using the data.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":69,"value":"testrings = d3.select(testringscont).select(\"#test\") // the containing svg element to put this all in.","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"nums = [55,80,90,35,60,70,50] // some simple data to use to drvie the sizes.","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"The next cell here creates a series of `` elements first, one for each data element, and translates them sideways to spread them out. You can use any X,Y location approach for this - grid on a page, map centroids, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"rings = testrings.selectAll(\".ringGroup\")\n .data(nums)\n .join(\"g\")\n .attr(\"id\", (d,i) => \"ring\"+i)\n .attr(\"transform\", (d,i) => \"translate(\" + i*100 + \",150)\")\n .classed(\"ringGroup\",true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"Now call the `ring()` function for each one of the groups created above.","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"rings.each((d,i,nodes) => {\n dvRing(d3.select(nodes[i]),d,d-(Math.random()*50))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"The ring function itself. This is also in my [dvlib_layout](https://observablehq.com/@emfielduva/dvlib_layout) library.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"dvRing = (elem,outerRad,innerRad,options) => {\n if (typeof(options) === \"undefined\") {options = {}}\n if (typeof(options.fillColor) === \"undefined\") {options.fillColor = \"steelblue\"}\n if (typeof(options.id) === \"undefined\") {options.id = \"id\" + Math.random()*100000}\n \n let mask = elem.select(\"defs\").node() ? elem.select(\"defs\") : elem.append(\"defs\").append(\"mask\").attr(\"id\",\"h_\"+options.id);\n mask.append(\"rect\").attr(\"width\", outerRad*2).attr(\"height\", outerRad*2).attr(\"x\", -outerRad).attr(\"y\", -outerRad).attr(\"fill\",\"white\");\n mask.append(\"circle\").attr(\"r\",innerRad).attr(\"fill\",\"black\");\n\n let ring = elem.selectAll(\".ring\").node() ? elem.select(\".ring\") : elem.append(\"circle\").classed(\"ring\", true);\n ring.attr(\"id\", options.id)\n .attr(\"r\", outerRad)\n .attr(\"mask\", \"url(#h_\" + options.id + \")\")\n .attr(\"fill\", options.fillColor)\n .classed(\"ring\",true);\n \n return ring;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"## Where can this strategy be useful?\nThis question actually came from a student looking to understand the gap between the documented NEED for treatment for the AIDS virus in Africa vs. the actual number of people who were being serviced by the agencies in question. A typical approach would simply be to count (and size circles?) of how many people's needs are being met, but what he wanted to do was directly look at the effectiveness of the programs, through the difference between action and need for action. Concentric rings on top of one another can start to get there, but a filled-in ring that literally draws and emphasizes the area between the two circles was far more direct. So I built this example and library function to achieve it.\n\nFor an example of this same idea, but using the gap in vaccinated population in the US (from readily avaialble CDC data), see the example [Ring plot on Map - Trust Gap?](https://observablehq.com/d/7d30025933cd167a?collection=@emfielduva/d3-layout-and-lib-examples).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}