2f:[{"id":"9a3a0ccd852c4f355559a6099d5d226377eafc57199e32b18072dda03f20384e61813bf8da1f6115173b1524c026895bd2fc8e71dfdfe0745d1bbb0a366aaa7a","href":"https://static.observableusercontent.com/files/9a3a0ccd852c4f355559a6099d5d226377eafc57199e32b18072dda03f20384e61813bf8da1f6115173b1524c026895bd2fc8e71dfdfe0745d1bbb0a366aaa7a","name":"covid19_vaccinations_in_the_united_states@1.csv","type":"text/csv","lastModified":1681235395499.258,"size":28379}] 2d:{"title":"Ring plot on Map - Trust Gap?","cells":[{"id":0,"value":"# Ring plot on Map - Trust Gap?\nan example of a variably-sized, filled-ring visual strategy to describe the Gap (difference) between the population by state (outer) and those vaccinated (inner), which can be used to begin to describe the issue of a gap in trust. Larger rings indicate more people, but thicker rings indicate a greater gap. The concentration and visual weight of drawing is on thickness rather than size.\n\nThis is an example of using the `dvRing` library function from my `dvlib_layout`, overlaid on a map.","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":"### Now implement the Rings\non top of the states, using their centroids to locate them.","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 vaccine data\nDownloaded April 11, 2023 from the [CDC site](https://covid.cdc.gov/covid-data-tracker/#vaccinations_vacc-people-fully-percent-total).","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"data = FileAttachment(\"covid19_vaccinations_in_the_united_states@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"data.forEach(d => d.population = +d[\"Residents with at least one dose\"] * 100 / +d[\"Percent of total pop with at least one dose\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"^^ oddly this data doesn't have an actual population field, so we'll calculate one from appropriate fields.","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"### Rings on the centroids\nThe outer radius is population. The inner radius (the hole / mask in the ring) is the vaccinated population. But what we're interested in here is not the number actually vaccinated (at least not directly), but rather the GAP between the outer and inner. The `dvRing` literally draws the gap by filling in the difference between.","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"mapLayers[\"rings\"] = map.select(\"#rings\")\n .selectAll(\"g\")\n .data(usstateCentroids)\n .join(\"g\")\n .each((d,i,nodes) => {\n let nodeElem = d3.select(nodes[i]);\n let location = projection([d.lon,d.lat]);\n let svgCoords = location[0] + \",\" + location[1];\n nodeElem.attr(\"transform\", \"translate(\" + svgCoords + \")\");\n nodeElem.attr(\"id\", (d,i) => \"ring\"+i);\n\n if (d.name == \"New York\") {d.name = \"New York State\"} // handle naming exception in the data.\n let dataThisState = data.find(s => s[\"Jurisdiction (State/Territory) or Federal Entity\"] == d.name);\n let rScale = .01;\n let innerRad = rFromArea(dataThisState[\"Residents with a completed primary series\"]) * rScale;\n let outerRad = rFromArea(dataThisState[\"population\"]) * rScale;\n dvRing(nodeElem,outerRad,innerRad);\n \n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"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 {dvRing} from \"@emfielduva/dvlib_layout\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}