31:T414,header = activeZip => { const basics = html`

${activeZip.properties.ZCTA5CE10} is a ZIP code in ${ activeZip.properties.county } County

Pop. ${activeZip.properties.DP05_0001E.toLocaleString()} +/- ${activeZip.properties.DP05_0001M.toLocaleString()}

`; let cases; if (activeZip.properties.confirmed_cases) { cases = html`

Confirmed cases: ${activeZip.properties.confirmed_cases}

`; } else { cases = html`There are no confirmed cases of COVID-19 in ${activeZip.properties.ZCTA5CE10}. It should be assumed that COVID-19 exposure can occur in every county in IL.`; } let per_capita = ""; if (activeZip.properties.cases_per_capita) { per_capita = html`

Cases per 1,000 people: ${( activeZip.properties.cases_per_capita * 1000 ).toLocaleString()}

`; } else if (activeZip.properties.confirmed_cases) { per_capita = html`

Per capita rate cannot be calculated because population estimate is too uncertain.

`; } return html`${basics} ${cases} ${per_capita}`; }32:T1b5d,viewof IllinoisCovidMap = { // Initialize const outerContainer = html`

${style()}

`; const headingContainer = html `

`; const mapContainer = html `

`; const container = html`

`; const selectorWrapper = html`

`; const selectorText = html``; const statewideContextWrapper = html`

`; const demographicSection = html`

`; // Check for stored results const storedZip = window.localStorage.getItem(STORAGE_KEY); // Set a default value for our selector let defaultSelectorValue = storedZip ? storedZip : greatestPerCapita; // Wait for geoip and override default if set (@TODO check first for local storage) if (!storedZip) { const geolocation = await geoip(); if (geolocation.postal && geolocation.region === "Illinois") { defaultSelectorValue = geolocation.postal; } } // Now set container value outerContainer.value = { selected: defaultSelectorValue }; let activeZip = getActiveZip(defaultSelectorValue); let activeCounty = getActiveCounty(activeZip.properties.county); // Build selector const selector = html`ZIP code `; selectorWrapper.appendChild(selector); selectorWrapper.appendChild(selectorText); outerContainer.appendChild(headingContainer); headingContainer.appendChild(selectorWrapper); selectorWrapper.appendChild(clickMessage); mapContainer.appendChild(mapLegend()); mapContainer.appendChild(container); headingContainer.appendChild(mapContainer); // outerContainer.appendChild(selectorWrapper); // outerContainer.appendChild(statewideContextWrapper); // container.appendChild(clickMessage); outerContainer.appendChild(demographicSection); yield outerContainer; function redrawContent() { window.localStorage.setItem(STORAGE_KEY, activeZip.properties.ZCTA5CE10); selectorText.innerHTML = ''; selectorText.append(selectorFragment(activeZip, activeCounty)); demographicSection.innerHTML = ''; demographicSection.append(demographicContent(activeZip)); // statewideContextWrapper.innerHTML = ''; // statewideContextWrapper.append(statewideContext(activeZip, activeCounty)); } redrawContent(); const map = new mapboxgl.Map({ container, style: "mapbox://styles/chicagoreporter/ck8s5gpth1uhb1irwjnniolhy?fresh=true", scrollZoom: true }); function redrawMap() { const bbox = turf.bbox(activeZip); map.fitBounds(bbox, { padding: 30 }); map.setPaintProperty("zctaActiveStrokeLayer", 'line-width', [ "interpolate", ["linear"], ["zoom"], 5, ["match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 1, 0], 14, ["match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 7, 0] ]); } function redraw() { // @TODO should probably set active ZIP here, too activeCounty = getActiveCounty(activeZip); redrawMap(); redrawContent(); window.localStorage.setItem(STORAGE_KEY, activeZip.properties.ZCTA5CE10); } selector.addEventListener('input', e => { outerContainer.value.selected = e.target.value; activeZip = getActiveZip(e.target.value); redraw(); }); map.addControl(new mapboxgl.NavigationControl()); // This stuff should really be loaded into a helper/callback map.on("load", () => { map.fitBounds(IllinoisBoundingBox); // This is so bad! But there's not a great way to wait for fitBounds to end that I've found. setTimeout(redrawMap, 300); map.addSource("zcta", { type: "geojson", data: { type: "FeatureCollection", features: IllinoisZCTAGeoCovidCases } }); const choroplethStops = [...breaks.slice(1), maxMeasure] .map(d => [countColor(d - 1), d + 1]) .flat(); map.addLayer( { id: "zctaFillLayer", type: "fill", source: "zcta", layout: {}, paint: { 'fill-color': [ 'step', ['get', "confirmed_cases"], "rgba(255, 255, 255, 0.1)", 1, ...choroplethStops.slice(0, choroplethStops.length - 1) ] } }, layerBefore ); map.addLayer( { id: "zctaStrokeLayer", type: "line", source: "zcta", layout: {}, paint: { 'line-color': '#444444', 'line-width': ['interpolate', ['linear'], ['zoom'], 7, 0, 15, 2], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 7.25, 1] } }, "road-label-simple" ); map.addLayer( { id: "zctaActiveStrokeLayer", type: "line", source: "zcta", layout: {}, paint: { 'line-color': '#222222', 'line-width': [ "interpolate", ["linear"], ["zoom"], 5, [ "match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 1, 0 ], 14, [ "match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 7, 0 ] ], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 5, 0, 14, 1] } }, "road-label-simple" ); map.addLayer({ id: 'zctaLabels', type: 'symbol', source: 'zcta', layout: { "text-padding": ["interpolate", ["linear"], ["zoom"], 8.99, 60, 12, 15], "text-font": ["Open Sans Bold", "Arial Unicode MS Regular"], "text-size": [ "interpolate", ["linear"], ["zoom"], 8.99, 0, 9, 10, 12, 18 ], "text-letter-spacing": 0.17, "text-field": ["to-string", ["get", "ZCTA5CE10"]] }, paint: { "text-halo-color": "hsla(0, 0%, 100%, 0)", "text-halo-width": 1 } }); // Click on ZIPs to navigate map.on('click', 'zctaFillLayer', function(e) { outerContainer.value.selected = e.features[0].properties.ZCTA5CE10; selector.value = outerContainer.value.selected; activeZip = getActiveZip(e.features[0].properties.ZCTA5CE10); redraw(); }); }); // await triggerEmbedAnalytics("IL county map"); invalidation.then(() => map.remove()); return outerContainer; }33:T92e,function demographicContent(activeZip) { const container = html`

`; container.append(html`

${activeZip.properties.ZCTA5CE10} is in ${ activeZip.properties.county } County and has an estimated population of ${activeZip.properties.DP05_0001E.toLocaleString()} (±${activeZip.properties.DP05_0001M.toLocaleString()}) for the most recent available time period (2014-2018).

`); if (activeZip.properties.confirmed_cases) { container.append(html`

How does ${activeZip.properties.ZCTA5CE10} compare to other ZIP codes?

Per capita

${activeZip.properties.ZCTA5CE10} has more confirmed cases per capita than XX% of Illinois counties.

${demographicChart(activeZip, "cases_per_capita")}

Confirmed cases

${activeZip.properties.ZCTA5CE10} has more confirmed cases than XX% of Illinois counties.

${demographicChart(activeZip, "confirmed_cases")}

`); } if (activeZip.properties.demographics) { container.append(html`

Who is affected by COVID-19 in ${ activeZip.properties.ZCTA5CE10 }?

Race

${demographicTable(activeZip.properties.demographics.race, "race")}

Age

${demographicTable( activeZip.properties.demographics.age.filter( d => d.age_group !== "Unknown" ), "age" )}

`); } container.append(html`

COVID data source: Illinois Department of Public Health. All numbers displayed are provisional and subject to change. ZIP codes with less than 6 cases are not shown.

Geographic and population data source: US Census/American Community Survey. Warning: This map and figures display US Census ZIP Code Tabulation Areas (ZCTAs). The boundaries of ZCTAs may vary slightly from from postal ZIP codes.

`); return container; }34:T4ad,function demographicChart(activeZip, column) { const places = IllinoisZCTAGeoCovidCases.filter( d => d.properties[column] && d.properties[column] > 0 ).sort((a, b) => b.properties[column] - a.properties[column]); const chartWidth = 100; const chartHeight = 25; const chartMargin = { left: 0, right: 0, top: 0, bottom: 0 }; const x = d3 .scaleBand() .domain(places.map(d => d.properties.ZCTA5CE10)) .range([chartMargin.left, chartWidth - chartMargin.right]) .padding(0); const y = d3 .scaleLinear() .domain([0, d3.max(places, d => d.properties[column])]) .range([chartHeight - chartMargin.bottom, chartMargin.top]); const svg = d3.create("svg").attr("viewBox", [0, 0, chartWidth, chartHeight]); svg .append("g") .selectAll("rect") .data(places) .join("rect") .attr("x", d => { return x(d.properties.ZCTA5CE10); }) .attr("y", d => y(d.properties[column])) .attr("height", d => chartHeight - y(d.properties[column])) .attr("width", x.bandwidth()) .attr("fill", d => d.properties.ZCTA5CE10 === activeZip.properties.ZCTA5CE10 ? "purple" : "#e9e9e9" ); return svg.node(); }35:Td3c,function style() { return html` `; }36:T59e,demographicTable = (data, demographic, lang = "en") => { if (!data) { return html`

no data

`; } const countWidthScale = d3 .scaleLinear() .domain([0, d3.max(data, d => d.count)]) .range([0, 100]); const totalCount = d3.sum(data, d => d.count); let columns = [ { name: "", flex: "0 90px", formatter: d => { const value = d[demographicKeyLabelMap.get(demographic).descColumn]; return value === 'Unknown' || value === 'Left Blank' ? html`${value}` : value; } }, { name: "Cases", flex: "0 80px", formatter: d => html`${d.count.toLocaleString()}` }, { name: "", flex: "0 80px", formatter: d => html` ${(d.count / totalCount).toLocaleString( undefined, { style: "percent", maximumSignificantDigits: 2 } )} ` } ]; return html` ${HyperGrid(data, { tableHeight: 34 * (data.length + 1), itemHeight: 34, columns })} `; }37:[{"id":"54ebe330c2ddc4a401f1bb8d8c4967d1e05271d79a9e4395805923778b4206417b24069653a421d375eee5ec3ec8e351e4b44a8cb6dd0cbf284888857346797c","href":"https://static.observableusercontent.com/files/54ebe330c2ddc4a401f1bb8d8c4967d1e05271d79a9e4395805923778b4206417b24069653a421d375eee5ec3ec8e351e4b44a8cb6dd0cbf284888857346797c","name":"IllinoisZCTAGeo.json","type":"application/json","lastModified":1586478102567.452,"size":3082776}] 2f:{"title":"COVID-19 In Illinois - ZIP code lookup","cells":[{"id":0,"value":"md`# COVID-19 In Illinois - ZIP code lookup`","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"IllinoisCovidMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"statewideContext = function(activeZip, activeCounty) {\n return html`

${\n activeZip.properties.County\n } County has ${activeCounty.properties.confirmed_cases.toLocaleString()} confirmed cases and ${activeCounty.properties.deaths.toLocaleString()} deaths to date. There have been ${IllinoisLatest.properties.confirmed_cases.toLocaleString()} confirmed cases and ${IllinoisLatest.properties.deaths.toLocaleString()} deaths statewide in Illinois to date.

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"selectorFragment = function(activeZip, activeCounty) {\n return html`in ${\n activeCounty.properties.County\n } County has ${\n activeZip.properties.confirmed_cases < 6\n ? \"less than 6\"\n : activeZip.properties.confirmed_cases.toLocaleString()\n } confirmed cases ${\n activeZip.properties.confirmed_cases > 5\n ? html`and ${(\n activeZip.properties.cases_per_capita * 1000\n ).toLocaleString(undefined, {\n maximumFractionDigits: 1\n })} cases per 1,000 people `\n : \"\"\n } as of ${LastUpdated.toLocaleString(undefined, {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n })}. \nThere have been ${IllinoisLatest.properties.confirmed_cases.toLocaleString()} confirmed cases and ${IllinoisLatest.properties.deaths.toLocaleString()} deaths statewide in Illinois to date.\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"clickMessage = html `

click a ZIP code on the map

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"function getActiveZip(zip) {\n return IllinoisZCTAGeoCovidCases.filter(\n feature => feature.properties.ZCTA5CE10 === zip\n ).pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"getActiveCounty = function(countyname) {\n return IllinoisAllCovidGeoDataPolygons.features\n .filter(d => d.properties.County === countyname)\n .pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"IllinoisLatest = IllinoisAllCovidGeoDataPolygons.features\n .filter(d => d.properties.County === \"Illinois\")\n .pop()","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"STORAGE_KEY = \"TCRCovidMapSelectedZIP\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"greatestPerCapita = d3.greatest(\n IllinoisZCTAGeoCovidCases,\n d => d.properties.cases_per_capita\n).properties.ZCTA5CE10","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"mapLegend = () => html`\n \n

Total cases

\n ${breaks.slice(1).map((b, i) => {\n return html`

\n \n ${breaks[i]}-${b}\n

`;\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"IllinoisBoundingBox = [\n [-94.30530163755736, 36.74643211733368],\n [-83.39230352848888, 42.63997206897545]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"IllinoisZCTAGeoCovidCases = IllinoisZCTAGeo.map(d => {\n const match = IllinoisZIPCodeCovidData.zip_values.find(\n c => d.properties.ZCTA5CE10 === c.zip\n );\n if (match) {\n d.properties = { ...match, ...d.properties };\n } else {\n d.properties.confirmed_cases = 0;\n }\n\n d.properties.pct_population_moe =\n d.properties.DP05_0001M / d.properties.DP05_0001E;\n\n if (d.properties.pct_population_moe < 0.1) {\n d.properties.cases_per_capita =\n d.properties.confirmed_cases / d.properties.DP05_0001E;\n } else {\n d.properties.cases_per_capita = null;\n }\n\n return d;\n}).sort(\n (a, b) => parseInt(a.properties.ZCTA5CE10) - parseInt(b.properties.ZCTA5CE10)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"IllinoisZCTAGeoCovidCasesGeoJSON = ({\n type: \"FeatureCollection\",\n features: IllinoisZCTAGeoCovidCases\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"IllinoisZCTAGeo = FileAttachment(\"IllinoisZCTAGeo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"IllinoisZIPCodeCovidData = await fetch(\n cdnRoot + \"sitefiles/COVIDZip.json?nocache=1\"\n).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"LastUpdated = new Date(\n `${IllinoisZIPCodeCovidData.LastUpdateDate.year}-${IllinoisZIPCodeCovidData.LastUpdateDate.month}-${IllinoisZIPCodeCovidData.LastUpdateDate.day}`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"countColor = d3.scaleThreshold(\n [...breaks.slice(1, breaks.length), maxMeasure],\n scheme\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"breaks = jenks(\n IllinoisZCTAGeoCovidCases.map(d => d.properties.confirmed_cases).filter(\n d => d > 0\n ),\n 4\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"maxMeasure = d3.max(\n IllinoisZCTAGeoCovidCases,\n d => d.properties.confirmed_cases\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// layerBefore = \"ne-10m-admin-1-states-provinc-0nwiti\"\nlayerBefore = \"building-outline\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"cdnRoot = \"https://d38afsumxukqre.cloudfront.net/\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"scheme = [\"#fdd0a2\", \"#fdae6b\", \"#fd8d3c\", \"#f16913\", \"#d94801\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"async function geoip() {\n return fetch(\"https://ipgeolocation.com?json=1\").then(response =>\n response.json()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"import { autoSelect, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"import { demographicKeyLabelMap } from \"@chicagoreporter/coronavirus-illinois-statewide-demographics\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.8.1\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiY2hpY2Fnb3JlcG9ydGVyIiwiYSI6ImNrN3kwZ2ZjNTAwNWczZW55N3dseGk3dTkifQ.8xPIVZq_YU73F3EWkkoQsA\";\n const href = await require.resolve(\"mapbox-gl@1.8.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"import {\n jenks,\n IllinoisAllCovidGeoDataPolygons\n} from \"@chicagoreporter/coronavirus-illinois-county-counts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import { HyperGrid } from \"@chicagoreporter/hypergrid\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"d3\", \"d3-array\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}