32:Te07,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const defaultZoom = 7; const defaultCenter = [-79.03788, 35.8988]; const bounds = [ [-86, 33], [-74, 38] ]; const map = (container.value = new mapboxgl.Map({ container, center: defaultCenter, //Load centered at NC zoom: defaultZoom, minZoom: 7, maxBounds: bounds, style: "mapbox://styles/mapbox/streets-v10", scrollZoom: true })); map.dragRotate.disable(); map.touchZoomRotate.disableRotation(); map.on("load", function () { container.dispatchEvent(new CustomEvent("input")); map.addSource("tracts", { type: "vector", tiles: [ "https://gis.data.census.gov/arcgis/rest/services/Hosted/VT_2019_140_00_PY_D1/VectorTileServer/tile/{z}/{y}/{x}.pbf" ], promoteId: "GEOID" // promote field to be used as a foreign key }); map.addLayer( { id: "tracts-layer", type: "fill", source: "tracts", "source-layer": "CensusTract", paint: { "fill-opacity": 1 } }, "building" ); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, maxWidth: "none" }); map.on("mousemove", "tracts-layer", activate); map.on("mouseleave", "tracts-layer", inactivate); function activate({ lngLat, features }) { const currGeoid = features[0].id; const currRow = sdiMap.get(currGeoid); let popupText = `Tract: ${currGeoid}`; for (const el in currRow) { if (el.startsWith("RPL") || el == "E_TOTPOP") { const format = popupFormat.get(el); popupText = popupText + `
${format.display}: ${currRow[ el ].toLocaleString(undefined, format.formatOptions)}${ el.startsWith("percent") ? `| Rank: ${ currRow[el.replace("percent", "centile")] }` : `` }`; } } map.getCanvas().style.cursor = "pointer"; popup.setLngLat(lngLat).setHTML(popupText).addTo(map); } function inactivate() { map.getCanvas().style.cursor = ""; popup.remove(); } }); map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); class ResetZoomControl { onAdd(map) { this.map = map; this.container = document.createElement("div"); this.container.className = "mapboxgl-ctrl mapboxgl-ctrl-group"; this.button = document.createElement("button"); this.button.textContent = "Reset Zoom"; this.button.style.width = "45px"; this.button.style.height = "45px"; this.container.appendChild(this.button); this.button.addEventListener("click", function () { map.flyTo({ center: defaultCenter, zoom: defaultZoom }); }); return this.container; } onRemove() { this.container.parentNode.removeChild(this.container); this.map = undefined; } } map.addControl(new ResetZoomControl()); map.updateFill = function (newFill) { map.setPaintProperty("tracts-layer", "fill-color", newFill); }; map.updateFillOutlineColor = function (newFill) { map.setPaintProperty("tracts-layer", "fill-outline-color", newFill); }; map.updateOpacity = function (newOpacity) { map.setPaintProperty("tracts-layer", "fill-opacity", newOpacity); }; invalidation.then(() => map.remove()); }33:[{"id":"7b42f4faf8cdc5ecd682f880fc53e7fe2c2fc1ca3cadae4d975c6fce5ba3458bb85b3219fe4f22709d82224a83001ab893c5d207e985d5c4231f9aaa2115fc1a","href":"https://static.observableusercontent.com/files/7b42f4faf8cdc5ecd682f880fc53e7fe2c2fc1ca3cadae4d975c6fce5ba3458bb85b3219fe4f22709d82224a83001ab893c5d207e985d5c4231f9aaa2115fc1a","name":"NorthCarolina.csv","type":"text/csv","lastModified":1628872955516.613,"size":1356310},{"id":"7c130a5b279e8d36f0e6a30db13fc7756217217dad1e26059bcb50cbeef4f377f24c180efc91539765f3de77542c7343d22d5c9fa41590e392f5e1513c8cd8d1","href":"https://static.observableusercontent.com/files/7c130a5b279e8d36f0e6a30db13fc7756217217dad1e26059bcb50cbeef4f377f24c180efc91539765f3de77542c7343d22d5c9fa41590e392f5e1513c8cd8d1","name":"SVI2018Documentation-codebook-only.csv","type":"text/csv","lastModified":1628881421885.182,"size":28918}] 30:{"title":"Examining the CDC Social Vulnerability Index (Tract, 2018, North Carolina)","cells":[{"id":0,"value":"md`# Examining the CDC Social Vulnerability Index (Tract, 2018, North Carolina)\n\nFor background (and data) regarding the Social Vulnerability Index, see the [CDC website](https://www.atsdr.cdc.gov/placeandhealth/svi/data_documentation_download.html). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"viewof scoreType = Inputs.radio(\n new Map([\n [\"Overall percentile ranking for all themes\", \"RPL_THEMES\"],\n [\"Percentile ranking for Socioeconomic theme\", \"RPL_THEME1\"],\n [\"Percentile ranking for Household Composition theme\", \"RPL_THEME2\"],\n [\"Percentile ranking for Minority Status/Language theme\", \"RPL_THEME3\"],\n [\"Percentile ranking for Housing Type/ Transportation theme\", \"RPL_THEME4\"]\n ]),\n { value: \"RPL_THEMES\", label: \"Score Type\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md` And here is a map of the SVI (${\n popupFormat.get(scoreType).display\n}) in North Carolina.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"viewof opacity = Inputs.range([0, 1], {\n label: \"Opacity of Overlay\",\n value: 1,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"mapLegend = legend({\n color: color,\n title: `Social Deprivation Index - ${popupFormat.get(scoreType).display}`,\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`Here's a look at how the index correlates with the different indicators from which it is derived. Also here is how the variable names translate:\n${Array.from(percentVariablesGroupedByTheme)\n .flatMap(d =>\n d[1].map(e => ` - ${e} : ${codebookMap.get(e)[\"2018_DESCRIPTION\"]}`)\n )\n .join(\"\\n\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"html`${Array.from(percentVariablesGroupedByTheme).map(\n d =>\n html`

${\n d[0] > 0\n ? `Theme ${d[0]}: ${\n codebookMap.get(`RPL_THEME${d[0]}`)[\"2018_DESCRIPTION\"]\n }`\n : \"Reference Indicators\"\n }

${percentBarPlot(sviPercentLong, d[1])}`\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"html`${Array.from(percentVariablesGroupedByTheme).map(\n d =>\n html`

${\n d[0] > 0\n ? `Theme ${d[0]}: ${\n codebookMap.get(`RPL_THEME${d[0]}`)[\"2018_DESCRIPTION\"]\n }`\n : \"Reference Indicators\"\n }

${percentCorrelationPlot(sviPercentLong, d[1])}`\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"function percentCorrelationPlot(longData, columnsToKeep) {\n const data = longData.filter((d) => columnsToKeep.includes(d.variable));\n return Plot.plot({\n grid: true,\n inset: 10,\n width: 250 * columnsToKeep.length,\n height: 240,\n facet: {\n data,\n x: \"variable\"\n },\n marks: [\n Plot.frame(),\n Plot.dot(data, {\n x: \"score\",\n y: \"percent\",\n stroke: (d) => nationalColor(d.score),\n tip: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"function percentBarPlot(longData, columnsToKeep) {\n const data = longData.filter((d) => columnsToKeep.includes(d.variable));\n return Plot.plot({\n grid: true,\n inset: 10,\n width: 240 * columnsToKeep.length,\n height: 240,\n marginLeft: 50,\n color: {\n domain: d3.range(1, 11),\n range: nationalColor.range().flatMap((d) => [d, d])\n },\n facet: {\n data,\n x: \"variable\"\n },\n marks: [\n Plot.frame(),\n Plot.barY(\n data,\n Plot.groupX(\n {\n y: function (d) {\n return (\n d3.sum(d, (e) => e.percent * e.population) /\n d3.sum(d, (e) => e.population)\n );\n }\n },\n {\n x: (d) => Math.ceil(d.score * 10),\n fill: (d) => Math.ceil(d.score * 10)\n }\n )\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"md`\\`percentVariablesGroupedByTheme\\` excludes \\`EP_PCI\\` (per capita Income) because it is the only indicator that is not a percentage value and so it does not fit well with the other charts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"percentVariablesGroupedByTheme = d3.rollup(\n codebook\n .map(d => [+d[\"THEME\"], d[\"2018_VARIABLE_NAME\"]])\n .filter(d => d[1].startsWith(\"EP_\") & (d[1] !== \"EP_PCI\")),\n v => v.map(e => e[1]),\n d => d[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"d3.select(mapLegend).selectAll(\"rect\").attr(\"opacity\", opacity)","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"strokeColor = [\n \"match\",\n [\"get\", \"GEOID\"],\n ...svi.map(d => [d.FIPS, \"#fff\"]).flat(),\n \"rgba(0,0,0,0)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"map.updateFillOutlineColor(strokeColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"map.updateOpacity(opacity)","pinned":true,"hidden":false,"mode":"ojs"},{"id":973,"value":"map.updateFill(fillColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"fillColor = [\n \"match\",\n [\"get\", \"GEOID\"],\n ...svi\n .filter(d => d[scoreType] !== null)\n .map(d => [d.FIPS, color(d[scoreType])])\n .flat(),\n \"rgba(0,0,0,0)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"color = nationalColor","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"nationalColor = d3.scaleQuantize([0, 1], d3.schemeOranges[6].slice(1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"sdiMap = new Map(svi.map(d => [d.FIPS, d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"svi = (await FileAttachment(\"NorthCarolina.csv\").csv())\n .map(function(d) {\n const stringColumns = [\n \"ST\",\n \"STATE\",\n \"ST_ABBR\",\n \"STCNTY\",\n \"COUNTY\",\n \"FIPS\",\n \"LOCATION\"\n ];\n for (const el in d) {\n if (!stringColumns.includes(el)) {\n d[el] = +d[el];\n }\n }\n\n return d;\n })\n .filter(d =>\n [\n \"RPL_THEMES\",\n \"RPL_THEME1\",\n \"RPL_THEME2\",\n \"RPL_THEME3\",\n \"RPL_THEME4\"\n ].every(e => d[e] > 0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"Inputs.table(svi)","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"sviPercentLong = svi.flatMap(function(d) {\n const currentArray = [];\n for (const el in d) {\n if (el.startsWith(\"EP_\")) {\n currentArray.push({\n variable: el,\n score: d[scoreType],\n percent: d[el],\n GEOID: d.FIPS,\n population: d.E_TOTPOP,\n theme: +codebookMap.get(el).THEME\n });\n }\n }\n return currentArray;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"popupFormat = new Map([\n [\"E_TOTPOP\", { display: \"Population\", formatOptions: {} }],\n [\n \"RPL_THEMES\",\n {\n display: \"Overall rank\",\n formatOptions: { style: \"percent\" }\n }\n ],\n [\n \"RPL_THEME1\",\n { display: \"Socioeconomic rank\", formatOptions: { style: \"percent\" } }\n ],\n [\n \"RPL_THEME2\",\n {\n display: \"Household Composition rank\",\n formatOptions: { style: \"percent\" }\n }\n ],\n [\n \"RPL_THEME3\",\n {\n display: \"Minority Status/Language rank\",\n formatOptions: { style: \"percent\" }\n }\n ],\n [\n \"RPL_THEME4\",\n {\n display: \"Housing Type/ Transportation rank\",\n formatOptions: { style: \"percent\" }\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"codebook = FileAttachment(\"SVI2018Documentation-codebook-only.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"codebookMap = new Map(codebook.map(d => [d[\"2018_VARIABLE_NAME\"], d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.10\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZ2FsbG93YXlldmFuIiwiYSI6ImNqanJlendzeTJ2MGIza3M0bzdzaGx5ZW8ifQ.Baz1Ju09q2mNHqw1gUbbSQ\";\n const href = await require.resolve(\"mapbox-gl@1.10/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}