32:T421,charts = { const data = groupedByFipsCode.get( selectedCounty ? countyStateFipsLookup.get(selectedCounty) : defaultFips ); const xMax = getMaxValue(selectedCounty || "Alameda County, CA"); const container = html`

${data[0].county_name}, ${ data[0].state }

${data[0].covid_19_deaths_total.toLocaleString()} COVID-19 related deaths out of ${data[0].all_deaths_total.toLocaleString()} total deaths from ${formatDate(data[0].start_week)} through ${formatDate( data[0].end_week )}. Data as of ${formatDate(data[0].data_as_of)}.

`; for (let d of data) { container.append(barChart(d, xMax, false)); } return container; }33:T9b4,barChart = (indicatorData, xMax, showAxisX = true) => { const w = width; const h = 175; const margin = { top: 24, right: 24, bottom: 36, left: 175 }; const data = normalizeBarData(indicatorData); const colorScale = d3 .scaleOrdinal() .domain(categories) .range(palette); const xScale = d3 .scaleLinear() .domain([0, xMax || d3.max(data, d => d.value)]) .range([margin.left, w - margin.right]); const yScale = d3 .scaleBand() .domain(categories) .range([h - margin.bottom, margin.top]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0, ${h - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => formatPct(d))) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)) .call(g => g.attr("text-anchor", "middle")); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).tickFormat(d => d.replace(/\_/gi, " "))) .call(g => g.select(".domain").remove()) .call(g => g.attr("font-size", 12)); const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); const barGroups = svg .append("g") .attr("id", "bars") .selectAll("g") .data(data) .join("g"); barGroups .append("rect") .attr("x", d => xScale(0)) .attr("y", d => yScale(d.name)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.value) - xScale(0)) .attr("fill", d => colorScale(d.name)); barGroups .append("text") .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("font-style", d => (d.value !== null ? "normal" : "italic")) .attr("x", d => { if (d.value === null) { return xScale(0); } else if (xScale(d.value) - xScale(0) <= 3 * 12) { return xScale(d.value) + 6; } else { return xScale(d.value) - 12 * 3; } }) .attr("y", d => yScale(d.name)) .attr("dy", yScale.bandwidth() / 2 + 4) // .attr("dx", 10) .text(d => d.value !== null ? d3.format(".1f")(d.value * 100) + "%" : "no data" ); svg .append("text") .text(indicatorData.indicator) .attr("fill", "#333") .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("x", 12) .attr("y", 12); showAxisX && svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }34:Tbd1,doMap = (features, options = {}) => { const w = options.width || width; const h = options.height || 600; const p = options.padding || 20; const projection = d3 .geoAlbersUsa() .fitExtent([[p, p], [w - p, h - p]], countiesGeo); const path = d3.geoPath(projection); const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const container = html`

`; const styles = html``; container.append(styles); container.querySelector(".legend").append( legend({ color: colorScale, title: "Ratio of deaths from COVID-19", height: 45 }) ); const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, w, h]); const g = svg .append("g") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); g.append("g") .attr("id", "nation-boundary") .attr("stroke-width", 0.8) .append("path") .attr("d", path(topojson.mesh(us, us.objects.nation))) .attr("fill", "#eee") .attr("stroke", "#888"); if (features) { g.append("g") .attr("id", "counties-data") .selectAll("path") .data(features) .join("path") .attr("d", d => path(d)) .attr("fill", d => colorScale(d.properties.rate)) .on("click", (event, d) => { container.value = `${d.properties.data[0].county_name}, ${d.properties.data[0].state}`; container.dispatchEvent(new CustomEvent("input")); }) .on("mouseover", ({ currentTarget }) => { d3.select(currentTarget) .attr("stroke", "yellow") .attr("stroke-width", 2); }) .on("mouseout", ({ currentTarget }) => { d3.select(currentTarget) .attr("stroke", "none") .attr("stroke-width", 0); }); } g.append("g") .attr("id", "county-boundaries") .attr("stroke-width", 0.5) .append("path") .attr( "d", path( topojson.mesh( us, us.objects.counties, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ) .attr("fill", "none") .attr("stroke", "#e2e2e2"); g.append("g") .attr("id", "state-boundaries") .attr("stroke-width", 0.7) .append("path") .attr("d", path(topojson.mesh(us, us.objects.states))) .attr("fill", "none") .attr("stroke", "#888"); svg .append("rect") .attr("width", w) .attr("height", h) .attr("fill", "none") .attr("stroke", "#222") .attr("stroke-width", 2); function zoomed({ transform }) { g.attr("transform", transform); g.selectAll("g").attr("stroke-width", 1 / transform.k); } svg.call(zoom); container.value = null; return container; }35:[] 30:{"title":"HET Vis Prototype: Provisional COVID-19 Death Counts by County and Race","cells":[{"id":0,"value":"md`# HET Vis Prototype: _Provisional COVID-19 Death Counts by County and Race_\n\nData source: [CDC Provisional and final COVID-19 deaths by county and race](https://www.cdc.gov/nchs/covid19/covid-19-mortality-data-files.htm). Also see the corresponding [data intake notebook](https://observablehq.com/@clhenrick/data-intake-provisional-covid-19-death-counts-by-county-and).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`## Visualizations\nView data for a county by clicking on one of the colored-in / non-grey counties on the map, or by using the \"Search for a County\" text input just below the map. You may zoom and pan on the map using your mouse or trackpad.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof map = doMap(countiesJoinedGeom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"viewof selectedCounty = autoSelect({\n autocomplete: \"on\",\n description:\n \"Use this text input to select a different county, or click on one in the map\",\n options: uniqueCounties,\n placeholder: \"Search for a County . . .\",\n value: map\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"{\n // updates the selectedCounty autocomplete when clicking on the map\n viewof selectedCounty.value = map;\n viewof selectedCounty.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`## Chart Implementations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`### Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"barTest = barChart(\n data[Math.floor(Math.random() * data.length)],\n undefined,\n false\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"mapTest = doMap(countiesJoinedGeom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`### Chart Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"colorScale = d3\n .scaleLinear()\n .domain([0.03, 0.2, 0.38]) // coresponds to covid-19 deaths / total deaths\n .range([\"#d7b5d8\", \"#df65b0\", \"#ce1256\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"formatPct = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"formatDate = date =>\n date.toLocaleString(\"en-US\", {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"getMaxValue = countyState => {\n const data = groupedByFipsCode.get(countyStateFipsLookup.get(countyState));\n return d3.max(d3.merge(data.map(normalizeBarData)), d => d.value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"normalizeBarData = indicatorData => {\n return Object.keys(indicatorData)\n .filter(key => categories.has(key))\n .map(key => ({ name: key, value: indicatorData[key] }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"palette = [\n \"#b3e2cd\",\n \"#fdcdac\",\n \"#cbd5e8\",\n \"#f4cae4\",\n \"#e6f5c9\",\n \"#fff2ae\",\n \"#f1e2cc\",\n \"#cccccc\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"sampleDatum = JSON.stringify(\n data[Math.floor(Math.random() * data.length)],\n null,\n 2\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"selectedDatum = groupedByFipsCode.get(\n selectedCounty ? countyStateFipsLookup.get(selectedCounty) : defaultFips\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"defaultFips = data.find(\n d => d.county_name === \"Alameda County\" && d.state === \"CA\"\n).fipscode","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"categories = new Set(\n \"non_hispanic_white,non_hispanic_black,non_hispanic_asian,non_hispanic_american_indian,hispanic\".split(\n \",\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"uniqueIndicators","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"uniqueCounties = [...groupedByCountyNameState.keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"countiesJoinedGeom = [...groupedByFipsCode.keys()].map(d => {\n const geo = countiesGeoByFips.get(d)[0];\n const data = groupedByFipsCode.get(d);\n geo.properties.rate = +d3.format(\".2f\")(\n data[0].covid_19_deaths_total / data[0].all_deaths_total\n );\n geo.properties.data = data;\n return geo;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"countyStateFipsLookup = data.reduce((map, d) => {\n if (!map.has(d.fipscode)) {\n map.set(`${d.county_name}, ${d.state}`, d.fipscode);\n }\n return map;\n}, new Map())","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"groupedByCountyNameState = d3.group(data, d => `${d.county_name}, ${d.state}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"groupedByIndicator = d3.group(data, d => d.indicator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"groupedByFipsCode = d3.group(data, d => d.fipscode)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"data = rawData.map(parseDatum)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"parseDatum = ({\n start_week,\n end_week,\n data_as_of,\n all_deaths_total,\n covid_19_deaths_total,\n non_hispanic_white,\n non_hispanic_black,\n non_hispanic_asian,\n non_hispanic_american_indian,\n hispanic,\n fipscode,\n ...rest\n}) => {\n return {\n ...rest,\n start_week: new Date(start_week),\n end_week: new Date(end_week),\n data_as_of: new Date(data_as_of),\n all_deaths_total: handleValue(all_deaths_total),\n covid_19_deaths_total: handleValue(covid_19_deaths_total),\n non_hispanic_white: handleValue(non_hispanic_white),\n non_hispanic_black: handleValue(non_hispanic_black),\n non_hispanic_asian: handleValue(non_hispanic_asian),\n non_hispanic_american_indian: handleValue(non_hispanic_american_indian),\n hispanic: handleValue(hispanic),\n fipscode: fipscode.length < 5 ? `0${fipscode}` : fipscode\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"handleValue = value => (value && typeof +value === \"number\" ? +value : null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"rawData","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"countiesGeoByFips = d3.group(countiesGeo.features, d => d.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"countiesGeo = topojson.feature(us, \"counties\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"uniqueIndicators.join(\", \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n data as rawData,\n uniqueIndicators\n} from \"@clhenrick/data-intake-provisional-covid-19-death-counts-by-county-and\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"import { autoSelect } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}