31:Teff,md`# Socioeconomic Status Index by ZCTA / ZIP This notebook describes an attempt to construct a socioeconomic status (SES) index, similar to those developed by [Cole Brokamp and colleagues](https://github.com/geomarker-io/dep_index) and [Amy Kind and colleagues](https://www.neighborhoodatlas.medicine.wisc.edu/). This notebook draws heavily on the work of Brokamp and colleagues as their published and documented R code was very clear and helpful. 1. Download data from Census API. Drawing from the variable set used by Brokamp, et al., I downloaded data for the 2019 version of the American Community Survey at the ZCTA level using the Census API. That request looked like this: \` https://api.census.gov/data/2019/acs/acs5?get=B17001_001E,B17001_002E,B19013_001E,B15003_001E,B15003_017E,B15003_018E,B15003_019E,B15003_020E,B15003_021E,B15003_022E,B15003_023E,B15003_024E,B15003_025E,B27010_001E,B27010_017E,B27010_033E,B27010_050E,B27010_066E,B19058_001E,B19058_002E,B25002_001E,B25002_003E&for=zip%20code%20tabulation%20area:*&key= \` You can also pull the labels for variables, e.g. \`https://api.census.gov/data/2019/acs/acs5/variables/B17001_002E.json\` 2. Create derived variables. Brokamp, et al. created derived variables that require you to rollup multiple Census variables into one. For instance, to get \`percent uninsured\`, you need to add up the Census variables for - Under 19 years, No health insurance coverage - 19 to 34 years, No health insurance coverage - 35 to 64 years, No health insurance coverage - 65 years and over, No health insurance coverage and divide by the total for insurance variable group. The derived variables are the same as in Brokamp et al. except I do not include fraction of vacant housing. - percent population below poverty level - median household income - percent of population 25 and older with at least a high school diploma/GED - percent uninsured - percent households receiving public assistance income or food stamps/SNAP 3. Subject the derived variables to principal component analysis (PCA). I used \`Stata\` but I'd like to compare to one of the javascript PCA libraries. PCA is one way to reduce the dimensionality of your data. In this case, we are hoping to reduce the dimensionality from five variables to one, which will be our index. In \`Stata\`, it looks like this: \`\`\` pca {list your variables} \`\`\` Then you get a table:

Component	Eigenvalue	Difference	Proportion	Cumulative
Comp1	2.94774	2.1269	0.5895	0.5895
Comp2	0.82084	0.313949	0.1642	0.7537
Comp3	0.506891	0.0702063	0.1014	0.8551
Comp4	0.436684	0.148837	0.0873	0.9424
Comp5	0.287847	.	0.0576	1

This looks like what we want. Component 1 explains almost 60% of the variance in these variables. 3. Make the index. Get predicted values for each zcta based on component 1 In \`Stata\` this is just \`predict p1\`, where \`p1\` is the name of the new variable that will be generated. I took the predicted values from component 1 and rescaled them, i.e., \`(p1 - min(p1)/(max(p1) - min(p1))\`. Now we have an index of socioeconomic status ranging between 0 and 1 that correlates well (and in the right direction) with 5 different Census measures of how a community (ZCTA) is doing. What does the distribution look like across ZCTAS? `32:Tade,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const defaultZoom = 4; const defaultCenter = [-98, 38.88]; const map = (container.value = new mapboxgl.Map({ container, center: [-79.03788, 35.89880], //Load centered at NC zoom: 6, minZoom: 4, style: "mapbox://styles/mapbox/streets-v10", scrollZoom: true })); map.on('load', function() { container.dispatchEvent(new CustomEvent("input")); map.addSource('zctas', { type: 'vector', url: 'mapbox://gallowayevan.cboqwdgt' }); map.addLayer( { id: "zctas", type: "fill", source: "zctas", "source-layer": "cb_2019_us_zcta510_500k-1r20wh", layout: {}, paint: { "fill-color": fillColor, "fill-opacity": 1 } }, "building" ); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on("mousemove", 'zctas', activate); map.on('mouseleave', 'zctas', inactivate); function activate({ lngLat, features }) { const currZip = features[0].properties.GEOID10; const currRow = index.get(currZip); let popupText = currZip; for (const el in currRow) { if ((el != "state") & (el != "zip")) { const format = popupFormat.get(el); popupText = popupText + `
${format.display}: ${currRow[el].toLocaleString( undefined, format.formatOptions )}`; } } 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.update = function() { // console.log("update"); // }; invalidation.then(() => map.remove()); }33:[{"id":"074e1fb73f02de8687d0d6ecd837cea77ebbe80b079b0788d6c73f89e28b77f9bf904350e4108295c606cb6689632e37e136206e5454359efb58d960a42a7b6f","href":"https://static.observableusercontent.com/files/074e1fb73f02de8687d0d6ecd837cea77ebbe80b079b0788d6c73f89e28b77f9bf904350e4108295c606cb6689632e37e136206e5454359efb58d960a42a7b6f","name":"zcta_index@1.csv","type":"text/csv","lastModified":1614883130021.434,"size":2030426}] 2f:{"title":"Socioeconomic Status Index by ZCTA / ZIP","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"vl\n .markBar()\n .title({\n text: \"Distribution of Socioeconomic Status Index Values\",\n fontSize: 16\n })\n .data(Array.from(index, d => ({ value: d[1].index })))\n .encode(\n vl\n .x()\n .fieldQ(\"value\")\n .bin({ step: 0.05 })\n .axis({ title: \"SES Index\" }),\n vl.y().count(),\n vl\n .color()\n .scale({ scheme: \"OrangeRed\" })\n .fieldQ(\"value\")\n .bin(true)\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md` And here is what a map of the values looks like.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"legend({\n color: color,\n title: \"SES Index\"\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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"vl\n .markCircle({ size: 15, opacity: 0.5 })\n .encode(vl.y().fieldQ(vl.repeat('column')), vl.x().fieldQ(\"index\"))\n .width(150)\n .height(150)\n .repeat({\n column: [\n 'percent_poverty',\n 'median_household_income',\n 'percent_at_least_high_school',\n 'percent_no_health_insurance',\n 'percent_assisted_income_snap'\n ]\n })\n .data(Array.from(index, d => d[1]))\n // .transform(vl.filter('datum.location == \"Seattle\"'))\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"fillColor = [\n \"match\",\n [\"get\", \"GEOID10\"],\n ...Array.from(index, d => [d[0], color(d[1].index)]).flat(),\n \"rgba(0,0,0,0)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"color = d3.scaleQuantize([0, 1], d3.schemeOrRd[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"index = new Map(\n (await FileAttachment(\"zcta_index@1.csv\").csv({ typed: true })).map(function(\n d\n ) {\n const zip5 = d.zip.toString().padStart(5, \"0\");\n return [zip5, d];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"popupFormat = new Map([\n [\"index\", { display: \"Index\", formatOptions: { maximumFractionDigits: 2 } }],\n [\n \"percent_poverty\",\n { display: \"Poverty\", formatOptions: { style: \"percent\" } }\n ],\n [\n \"median_household_income\",\n {\n display: \"Median Household Income\",\n formatOptions: { style: \"currency\", currency: \"USD\" }\n }\n ],\n [\n \"percent_at_least_high_school\",\n { display: \"At Least High School/GED\", formatOptions: { style: \"percent\" } }\n ],\n [\n \"percent_no_health_insurance\",\n { display: \"No Health Insurance\", formatOptions: { style: \"percent\" } }\n ],\n [\n \"percent_assisted_income_snap\",\n { display: \"Assisted Income/SNAP\", formatOptions: { style: \"percent\" } }\n ]\n])","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"},{"id":126,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3-scale\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}