31:Tb4a,viewof selectedStates = { const container = html`

`; const tooltip = new Tooltip(d3.select(container)); function handleClick(event, { id }) { updateState(id); updateFill(event, id); } function handleMouseover(event, { id }) { d3.select(event.target).attr("fill", colors[3]); tooltip.display({ id }, tooltipContents); } function handleMouseleave(event, { id }) { d3.select(event.target).attr("fill", getFillColor(id)); tooltip.hide(); } function handleMousemove(event) { tooltip.move(event); } function updateState(id) { if (state1 === null && state2 === null) { viewof state1.value = id; viewof state2.vaue = null; } else if (state1 !== null && id !== state1 && state2 === null) { viewof state1.value = state1; viewof state2.value = id; } else if (state1 !== null && id === state1) { viewof state1.value = null; viewof state2.value = state2; } else if (state1 !== null && id !== state1 && id === state2) { viewof state1.value = state1; viewof state2.value = null; } else if (state1 === null && id !== state1) { viewof state1.value = id; viewof state2.value = state2; } else if (state1 === null && state2 === id) { viewof state1.value = null; viewof state2.value = null; } viewof state1.dispatchEvent(new CustomEvent("input")); viewof state2.dispatchEvent(new CustomEvent("input")); } function updateFill(event, id) { d3.select(event.target).attr("fill", getFillColor(id)); } function getFillColor(id) { if (id === state1) { return colors[0]; } else if (id === state2) { return colors[1]; } else { return "#e2e2e2"; } } function tooltipContents(d) { return `${statesGeoByFips.get(d.id).properties.name}`; } return container; }32:[] 2f:{"title":"Compare U.S. State Demographics","cells":[{"id":0,"value":"md`# Compare U.S. State Demographics\n\nUse the \"Mad Lib\" or map below to select two states to compare their demographic makeup. Uses data from the U.S. Census 2014–2018 ACS 5 Year estimates.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"madlib = md`I'd like to compare the demographics of\n${viewof state1.bind(\n html``\n)}\nwith \n${viewof state2.bind(\n html``\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"tableState1 = {\n if (state1 !== null) {\n d3.select(table1)\n .select(\"p.table-title\")\n .style(\"background-color\", colors[0])\n .style(\"padding\", \"12px\")\n .style(\"display\", \"inline-block\");\n return table1;\n }\n return \"select a state\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"tableValuePicker1 = viewof vtp1","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"tableState2 = {\n if (state2 !== null) {\n d3.select(table2)\n .select(\"p.table-title\")\n .style(\"background-color\", colors[1])\n .style(\"padding\", \"12px\")\n .style(\"display\", \"inline-block\");\n return table2;\n }\n return \"select a second state\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"tableValuePicker2 = viewof vtp2","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"colors = [\n \"#7fc97f\",\n \"#beaed4\",\n \"#fdc086\",\n \"#ffff99\",\n \"#386cb0\",\n \"#f0027f\",\n \"#bf5b17\",\n \"#666666\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof state1 = new View(\"06\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof state2 = new View(\"32\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"selectOptions = allStatesFips\n .map(({ name, fips }) => ({\n label: name,\n value: fips\n }))\n .sort((a, b) => +a.value - +b.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"import { select, autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"import { Tooltip } from \"534d662eaa9b53f1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"import { table as table1, viewof valueTypePicker as vtp1 } with {\n state1 as selectedFips\n} from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"import { table as table2, viewof valueTypePicker as vtp2 } with {\n state2 as selectedFips\n} from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"import { allStatesFips } from \"@clhenrick/acs-race-ethnicity-characteristics-by-state\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {\n mapConfig,\n path,\n projection,\n statesGeo,\n statesGeoByFips,\n us,\n topojson\n} from \"@clhenrick/reusable-choropleth-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}