29:null 2a:["$","title",null,{"children":"Pack Circles with Donuts inside | Eric Field | Observable"}] 2f:T5a5,30:[] 2d:{"id":"b9344a28afaf0439","slug":"pack-circles-with-donuts-inside","title":"Pack Circles with Donuts inside","thumbnail":"119c02c9953b697ad2290325f9a3de72fadc3120561e6e36f01e39ca74deb9f6","access_level":"public","create_time":"$D2022-05-07T22:47:36.780Z","update_time":"$D2022-05-08T04:52:06.900Z","view_time":null,"first_public_time":"$D2022-05-08T03:56:35.638Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":381,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"a9e9f7027a40da9e","slug":"d3-layout-and-lib-examples","title":"d3 layout and lib examples","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Pack Circles with Donuts inside","cells":[{"id":0,"value":"# Pack Circles with Donuts inside\nCombining implementations of the [Powerplants Pack Circles](https://observablehq.com/@emfielduva/pack-circles?collection=@emfielduva/d3-layout-and-lib-examples) on State with [Donuts](https://observablehq.com/@emfielduva/donut-or-pie?collection=@emfielduva/d3-layout-and-lib-examples) showing fuel breakdown. Circles are sized by the overall net generation data, scaled appropriately, and donuts are fit to the same after Pack Circles calculates it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svgContainer","database":"$undefined"},{"id":45,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"import {powerplants_2019} from \"@emfielduva/dvlib_sampledata\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"### Create the Pack Circles first.\nIf you turned off the donuts layer, you'd see they're underneath.\n\nThe data is a rollup and sum on just the states. We'll get the fuel data later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"rollupData = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d[\"Plant annual net generation (MWh)\"])), d => d[\"Plant state abbreviation\"]).sort((a,b) => d3.descending(a[1],b[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"dataLayout = layoutChildren(\"powerplants\", rollupData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"pcLayer = d3.select(svgContainer).select(\"#packCircles\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"packCircles = dvPackCircles(pcLayer,dataLayout,600,600,'',options)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"options = ({\n padding: 1,\n textLabelField: \"Plant state abbreviation\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"### Now let's use that to create donuts in the same circles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"First grab the layer for the donuts. The layer is already a static `` in the svg.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"donutLayer = d3.select(svgContainer).select(\"#donuts\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"A new Rollup for stateFuels, as a two layer hierarchy. We could have maybe done this for the first one too, but then we'd have to deal with controlling the pack circles only on the first level. For simplicity here, I'm creating a second rollup dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"stateFuels = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d[\"Plant annual net generation (MWh)\"])), d => d[\"Plant state abbreviation\"], d => d[\"Plant primary fuel generation category\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"Then use the circles that we already have as the base to generate the donuts. \n- For each of the circles, get it's center x, y, and radius, along with it's State code. \n- Get fuel data from the stateFuels for that state code. \n- Create a new group `` element for each state donut, positioned at the packCircles state center. \n- Then call the dvDonut library function to draw a donut using that state's fuel data, in that state group, and using the outer radius which is the radius of the packCircles circle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"pcLayer.selectAll(\"circle\").each((d,i,nodes) => {\n if (packCircles) {} // a dummy dependency to have it wait until the packCircles is done.\n\n if (Array.isArray(d.data)) {\n let thisState = d.data[0];\n let thisX = d.x; // just to call these out specifically to understand what we're doing.\n let thisY = d.y;\n let thisR = d.r;\n \n let thisStateData = stateFuels.find(s => s[0] == thisState)[1];\n \n let donutGroup = donutLayer.select(\"g[id=d_thisState]\").node() \n ? donutLayer.select(\"g[id=d_thisState]\") \n : donutLayer.append(\"g\").attr(\"id\",\"d_\"+thisState);\n \n donutGroup.attr(\"transform\", \"translate(\" + thisX + \" \" + thisY + \")\");\n let options = {\n translateXY:{x:0,y:0}\n }\n \n let donut = dvDonut(donutGroup, thisStateData, thisR, thisR/2,options);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"-----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"#### required library functions to get this done.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"import {layoutChildren, dvPackCircles, dvDonut} from \"@emfielduva/dvlib_layout\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {toNum} from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"