2f:T42e,mapLayers["stateFuels"] = map.select("#stateFuels") .selectAll("g") .data(usstateCentroids) .join("g") .each((d,i,nodes) => { let stateAbbr = usStateCodes.find(c => c.NAME == d.name).ABBR; let location = projection([d.lon,d.lat]); let sizeRadius = rFromArea(stateGenTotals.get(stateAbbr)) * 0.004; let sizeDiameter = sizeRadius * 2; let svgX = location[0]-sizeRadius; let svgY = location[1]-sizeRadius; let svgCoords = svgX + "," + svgY; let stateFuels = d3.rollups(powerplants_2021.filter(d=>d["Plant state abbreviation"]==stateAbbr), v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"], d => d["Plant primary fuel category"]);; let stateFuelsLayoutHierarchy = layoutChildren("pp", stateFuels); let nodeElem = d3.select(nodes[i]); dvPackCircles(nodeElem, stateFuelsLayoutHierarchy, sizeDiameter, sizeDiameter,'', {classField: "Plant primary fuel generation category"}); nodeElem.attr("transform", "translate(" + svgCoords + ")"); })30:T51f,31:[] 2d:{"title":"US map with Powerplant Pack Circles","cells":[{"id":0,"value":"# US map with Powerplant Pack Circles\nCombining and instantiating multiple visual organizations on one visual. \nNote this could also be a series of treemaps, dendograms, sparklines, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":8,"value":"map = d3.select(mapContainer) // d3 select the container object and/or layer to draw into","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"projection = d3.geoAlbers() // set map projection","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {basemaps, drawMapLayer, geoCentroids} with {projection} from \"@emfielduva/dvlib_maps\" // import library functions","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"usstates = (await(basemaps.us_states20m.geojson).json()) // get the states basemap from my collection.","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"mapLayers = {\n let mapLayers = []; // collection of layers\n mapLayers[\"usstates\"] = drawMapLayer(map,\"usstates\",usstates.features,\"properties.NAME\"); // draw the base layer\n return mapLayers; // return them for use later\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"### Overlay Pack Circles on the centroids of the map states\nThe above code just creates a basemap layer. Now we'll use the data from those polygons - both the geographic centroids of them and their state name - to relate to the powerplants dataset (or use your data...) to instantiate a new and properly sized [Pack Circles](https://observablehq.com/@emfielduva/pack-circles?collection=@emfielduva/d3-layout-and-lib-examples) diagram right on top of the states.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"#### First we get the centroids.","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"usstateCentroids = {\n let usstateCentroids = geoCentroids(usstates.features, \"properties.NAME\");\n usstateCentroids.forEach(d => {\n d.lon = d.coord[0];\n d.lat = d.coord[1];\n });\n return usstateCentroids;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"#### then bring in the powerplants data\nand roll it up to get sums of net generation for each state","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"import {powerplants_2021} from \"@emfielduva/dvlib_sampledata\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"stateGenTotals = d3.rollup(powerplants_2021, v => d3.sum(v, d => toNum(d[\"Plant annual net generation (MWh)\"])), d => d[\"Plant state abbreviation\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"### then instantiate a new dvPackCircles for each state's fuel data\nlocated at that state's geographic centroid and sized (overall size of the pack circle) based on the by state sum totals above. Thus a new dvPackCircles is created for EACH state from it's subset (filtered) data, each one is independent of the others, but they are sized consistently across the entire set (based on the sums in the stateGenTotals above), and located at each state location on the map.","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":155,"value":"import {toNum, rFromArea} from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"import {usStateCodes} from \"@emfielduva/dvlib_maps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {layoutChildren, dvPackCircles} from \"@emfielduva/dvlib_layout\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}