31:T804,table = { if (!selectedFips) return; const showPct = valueTypePicker === "true"; const styles = html``; const table = html`

${styles}

${fipsToStates.get(selectedFips)} State Profile

${renderHeader()} ${renderBody()}

`; function renderHeader() { return `Race/Ethnicity total population ${sexBuckets.map(d => `population ${d}`).join("")} ${ageBuckets.map(d => `population ${d}`).join("")}`; } function renderBody() { return [...dataRaceByState] .sort((a, b) => a[0].localeCompare(b[0])) .map(([group, { total, sex, sums }]) => { return html` ${group} ${ showPct ? formatPct(total / stateTotalPop) : total.toLocaleString() } ${sex.map( v => html`${ showPct ? formatPct(v / total) : v.toLocaleString() }` )} ${sums.map( v => html`${ showPct ? formatPct(v / total) : v.toLocaleString() }` )} `; }); } function value(d) {} return table; }32:Ta73,ageDistChart = { // code borrowed from: https://observablehq.com/@d3/stacked-normalized-horizontal-bar const container = html`

`; const tooltip = new Tooltip(d3.select(container).select(".tooltip")); const margin = { top: 36, right: 12, bottom: 12, left: 150 }; const height = dataAgeDistChart.length * 25 + margin.top + margin.bottom; const xScale = d3.scaleLinear().range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(dataAgeDistChart.map(d => d.name)) .range([margin.top, height - margin.bottom]) .padding(0.08); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale).ticks(width / 100, "%")) .call(g => g.selectAll(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); const formatPercent = d3.format(".1%"); const formatValue = x => (isNaN(x) ? "N/A" : x.toLocaleString("en")); const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg .append("g") .selectAll("g") .data(stacked) .enter() .append("g") .attr("fill", d => colorScaleAges(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => xScale(d[0])) .attr("y", (d, i) => yScale(d.data.name)) .attr("width", d => xScale(d[1]) - xScale(d[0])) .attr("height", yScale.bandwidth()) .attr("stroke", "#222") .attr("stroke-width", 0) .attr("stroke-dasharray", "5 2") .on("mouseover", (event, d) => { d3.select(event.target.parentNode).raise(); d3.select(event.target) .attr("stroke-width", 1) .raise(); tooltip.display(d, tooltipContents); }) .on("mouseout", event => { d3.select(event.target).attr("stroke-width", 0); tooltip.hide(); }) .on("mousemove", event => { tooltip.move(event); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); function tooltipContents(d) { return `${d.data.name} ${d.key} ${formatPercent(d[1] - d[0])} (${formatValue(d.data[d.key])})`; } return container; }33:[] 2f:{"title":"ACS Race/Ethnicity Characteristics by State","cells":[{"id":0,"value":"md`# ACS Race/Ethnicity Characteristics by State\n\nTODO UI:\n- [x] autosuggest dropdown for selecting a state\n- [ ] select & compare two states? (probably better to do in a different notebook)\n- [ ] maybe a map for selecting a state as well?\n- [ ] enable table column sorting\n- [x] make table responsive (fixed header, scroll x, y)\n- [ ] maybe use some subtle color to highlight small to large values?\n\nTODO Data:\n- [x] all race/ethnicity\n- [x] age buckets\n- [x] total pop count\n- [x] total pop male count\n- [x] total pop female count\n- [x] value as % (?)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`## State Profile Table\n\nTable showing population breakdowns for all race/ethnicities for a given state. Note that the table scrolls horizontally, there are more columns hidden towards the right. Select a state using the autosuggest input and toggle between raw counts and percentages using the checkbox below. \n\nIt might be good to include the margin of error for each value as well, perhaps as a tooltip on hover?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof statePicker = autoSelect({\n options: Array.from(statesToFips.keys()).sort(),\n description:\n \"Type the name of a state or use the dropdown.
Typing will filter the dropdown options.\",\n title: \"Select State\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof valueTypePicker = checkbox({\n description: \"View table values as a percentages\",\n options: [{ value: \"true\", label: \"Show Percentages\" }],\n value: \"false\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"age_distribution_chart = md`### Age Distribution Chart\n\nShowing separate charts of related data variables from the above table could be useful to help users spot trends and make comparisons. One example could be an age distribution chart that shows the percentage of each age group for each race/ethnicity.\n\nOne variation on this could be the \"Population Pyramid\", though there are [criticisms that this type of chart](http://www.randalolson.com/2015/07/14/rethinking-the-population-pyramid/#:~:text=The%20second%20flaw%20with%20population,distributions%20of%20men%20and%20women.&text=Arguably%2C%20we%20can%20now%20perform,34%2Dyear%2Dold%20men%3F), such as making it difficult to draw comparisions. Regardless, I anticipate that users will likely want to see race/ethnicity broken down by gender and age, so it could be worth exploring how to present that, perhaps using a stacked bar chart to show one racial/ethnic group at a time.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`**${fipsToStates.get(selectedFips)} Age Distribution by Race/Ethnicity**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"ageDistChartKey = legend({\n title: \"Age (years)\",\n color: colorScaleAges,\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"colorScaleAges = d3\n .scaleOrdinal()\n .domain(stacked.map(d => d.key))\n .range(d3.schemeSpectral[stacked.length])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"stacked = d3\n .stack()\n .keys(ageDistColumns)\n .offset(d3.stackOffsetExpand)(dataAgeDistChart)\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"ageDistColumns = ageBuckets","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"dataAgeDistChart = {\n if (!selectedFips) return [];\n\n return [...dataRaceByState]\n .sort((a, b) => a[0].localeCompare(b[0]))\n .map(([race, { sums, total }]) => {\n const datum = {};\n datum.name = race;\n\n const ages = sums.reduce((acc, cur, idx) => {\n acc[ageBuckets[idx]] = cur;\n return acc;\n }, {});\n\n return { ...datum, ...ages, ...{ total } };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"selectedFips = statePicker\n ? statesToFips.get(statePicker)\n : statesToFips.get(defaultState)","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"defaultState = \"New York\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"fipsToStates = new Map([...statesToFips].map(([name, fips]) => [fips, name]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"statesToFips = new Map(allStatesFips.map(({ name, fips }) => [name, fips]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"formatPct = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Data Wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`This uses variables that have totals not broken down by age or sex (Currently not using this data above).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"dataRace = {\n const res = await fetch(\n `${dataApiUrl}?get=${variables},NAME&for=state:*&key=${apiKey}`\n );\n const data = await res.json();\n return data.slice(1).map(row =>\n row.reduce((acc, d, i) => {\n acc[variablesNice[i]] = d;\n return acc;\n }, {})\n );\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"variablesNice = variables\n .map(niceLabel)\n .map(key =>\n key\n .replace(/ /gi, \"_\")\n .replace(/:/gi, \"\")\n .replace(/,/gi, \"\")\n )\n .concat([\"name\", \"fips\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"variables = [\n \"B01001_001E\", // total estimated population, (all sexes), sex by age,\n\n // total pop by race only\n \"B02001_002E\", // White (includes Hispanic or Latino?)\n \"B02001_003E\", // Black or African American\n \"B02001_004E\", // American Indian or Alaskan Native\n \"B02001_005E\", // Asian\n \"B02001_006E\", // Native Hawaiian or Pacific Islander\n \"B02001_007E\", // Some other race,\n\n // hispanic or latino origin by specific origin\n \"B03003_003E\" // Hispanic or Latino\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`Test the age variables data wrangling. \n\nGrab age breakdowns for each race / ethnicity for a single state. The \\`sums\\` values are an array with 10 values that correspond to the 10 age buckets. The \\`totals\\` values are the total population for that race/ethnicity. The \\`sex\\` values are total population partitioned by male / female. From here we can calculate the percentages of the population for each age bucket, as well as the total state population and percentage of the total population for each race.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"dataRaceByState = {\n const data = new Map();\n\n if (!selectedFips) return data;\n\n for (let [race, variables] of ageVariablesByRace) {\n const cur = await getData(variables, selectedFips);\n const sums = Array.from(getAgeVariablesByRace(curRace).values(), V =>\n d3.sum(V, v => cur[1][ageVariablesIndex.get(v)])\n );\n const sex = Array.from(getSexVariablesByRace(curRace).values(), V =>\n d3.sum(V, v => cur[1][ageVariablesIndex.get(v)])\n );\n const total = d3.sum(cur[1].slice(0, -2));\n data.set(race, { sums, sex, total });\n yield data;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"stateTotalPop = selectedFips\n ? d3.sum(dataRaceByState.values(), d => d.total)\n : null","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`Get all states for a single race / ethnicity. Everything here is index based, as that's how the Census API returns data. The \\`ageVariableTotals\\` are total populations for a given race/ethnicity for each state. The \\`ageVariablesSums\\` are the age bucket sums for each state. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"curRace = \"Black (Alone)\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"ageVariableTotals = dataTest.slice(1).map(d => d3.sum(d.slice(0, -1)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"ageVariablesSums = dataTest\n .slice(1)\n .map(d =>\n Array.from(getAgeVariablesByRace(curRace).values(), V =>\n d3.sum(V, v => d[ageVariablesIndex.get(v)])\n )\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"// sum age buckets for a single state & race\n// this transforms the 28 age related variables into 10 age buckets\nArray.from(getAgeVariablesByRace(curRace).values(), V =>\n d3.sum(V, v => dataTest[1][ageVariablesIndex.get(v)])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"ageVariablesIndex = {\n const index = new Map(dataTest[0].map((d, i) => [d, i]));\n if (index.get(\"state\") !== dataTest[0].length - 1)\n throw \"state should be last column name\";\n if (index.get(\"NAME\") !== dataTest[0].length - 2)\n throw \"state should be second to last column name\";\n return index;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"dataTest = getData(ageVariablesByRace.get(curRace))","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`Helper data wrangling cells.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"sexBuckets = [\"male\", \"female\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"// these buckets should be consistent for any race / ethnicity\nageBuckets = Array.from(getAgeVariablesByRace(\"White (Alone)\").keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"ageVariablesByRace = new Map(\n [...raceGroupCodes].map(([race, key]) => [\n race,\n Array.from(getAgeVariablesByRace(race).values())\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"// these correspond to table B01001 age buckets by gender by race\n// e.g. B01001D would be for all age buckets that are also \"Asian\"\n// see: https://api.census.gov/data/2018/acs/acs5/variables.html\nraceGroupCodes = new Map([\n // [\"White (Alone)\", \"A\"],\n [\"Black (Alone)\", \"B\"],\n [\"American Indian / Alaskan Native\", \"C\"],\n [\"Asian\", \"D\"],\n [\"Native Hawaiian / Pacific Islander\", \"E\"],\n [\"White/Non-Hispanic (Alone)\", \"H\"],\n [\"Hispanic/Latino\", \"I\"],\n [\"Other\", \"F\"]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"getAgeVariablesByRace = race =>\n new Map(\n [\n [\"<10\", [\"003\", \"004\", \"018\", \"019\"]],\n [\"10-19\", [\"005\", \"006\", \"007\", \"020\", \"021\", \"022\"]],\n [\"20-29\", [\"008\", \"009\", \"023\", \"024\"]],\n [\"30-34\", [\"010\", \"025\"]],\n [\"35-44\", [\"011\", \"026\"]],\n [\"45-54\", [\"012\", \"027\"]],\n [\"55-64\", [\"013\", \"028\"]],\n [\"65-74\", [\"014\", \"029\"]],\n [\"75-84\", [\"015\", \"030\"]],\n [\"≥85\", [\"016\", \"031\"]]\n ].map(([key, V]) => [\n key,\n V.map(v => `B01001${raceGroupCodes.get(race)}_${v}E`)\n ])\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"getSexVariablesByRace = race =>\n new Map(\n [\n [\n \"male\",\n [\n \"003\",\n \"004\",\n \"005\",\n \"006\",\n \"007\",\n \"008\",\n \"009\",\n \"010\",\n \"011\",\n \"012\",\n \"013\",\n \"014\",\n \"015\",\n \"016\"\n ]\n ],\n [\n \"female\",\n [\n \"018\",\n \"019\",\n \"020\",\n \"021\",\n \"022\",\n \"023\",\n \"024\",\n \"025\",\n \"026\",\n \"027\",\n \"028\",\n \"029\",\n \"030\",\n \"031\"\n ]\n ]\n ].map(([key, V]) => [\n key,\n V.map(v => `B01001${raceGroupCodes.get(race)}_${v}E`)\n ])\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"// this is just for having a fips <-> state lookup\nallStatesFips = {\n const res = await fetch(`${dataApiUrl}?get=NAME&for=state:*&key=${apiKey}`);\n const data = await res.json();\n const vars = [\"name\", \"fips\"];\n return data.slice(1).map(row =>\n row.reduce((acc, d, i) => {\n acc[vars[i]] = d;\n return acc;\n }, {})\n );\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"getData = async (variables, state = \"*\") => {\n const res = await fetch(\n `${dataApiUrl}?get=${variables},NAME&for=state:${state}&key=${apiKey}`\n );\n return await res.json();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"dataApiUrl = \"https://api.census.gov/data/2018/acs/acs5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"apiKey = \"bd155aaa303834a623fa83babc2d2644ac60fbf3\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"import { select, autoSelect, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"import { niceLabel } from \"@enjalot/us-county-datasets\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}