${d.properties[field]}

31:T4d2,md`# NY Times COVID-19 Cases by Race/Ethnicity Mapping data that New York Times obtained from the Center for Disease Control on COVID-19 cases that include information on race and ethnicity via a Freedom of Information Law request and lawsuit. See [The Fullest Look Yet at the Racial Inequity of Coronavirus](https://www.nytimes.com/interactive/2020/07/05/us/coronavirus-latinos-african-americans-cdc-data.html) for background. Learn more about the data and how it was acquired on [this episode of The Daily](https://www.nytimes.com/2020/07/08/podcasts/the-daily/coronavirus-data-united-states.html). Data source notes from the NY Times: > _Source: Centers for Disease Control and Prevention | Note: Data is through May 28 and includes only cases for which the race/ethnicity and home county of the infected person was known. Only groups that make up at least 1 percent of a county’s population are considered in determining the highlight color on the map. Sparsely populated areas in counties are not highlighted. The C.D.C. data included race/ethnicity information, but no county location, for infected people in eight additional states: Hawaii, Maryland, Missouri, Nebraska, New Hampshire, New Mexico, Texas, and Vermont_. `32:T50c,charts = { const styles = smallMultiples ? ` .charts-container { display: flex; flex-flow: row wrap; justify-content: space-around; } .charts-container > .chart-container { width: ${dims.width - dims.padding}px; margin-top: ${dims.padding * 2}px; }` : ` .charts-container > .chart-container { border-bottom: 1px solid #e2e2e2; margin-top: ${dims.padding * 4}px; } .charts-container > .chart-container:last-of-type { border-bottom: none; } `; const container = html`

`; // to disable when making lots of edits if (renderCharts !== "true") return; for (const ramp in colorRamps) { const map = renderMap({ field: `${ramp}_rate`, color: colorRamps[ramp], race: ramp, features: cartoData.features.filter( // only show counties where // the race/ethnicity is greater than 1% of the total // and there is at least 1 case d => d.properties[`pct_${ramp}`] > 0.01 && d.properties[`${ramp}_cases`] > 0 ) }); container.appendChild(map); yield container; } }33:T616,renderMap = (config = {}) => { const features = config.features || cartoData.features; const field = config.field || ""; const race = config.race || ""; const color = colorScale.copy().range(config.color); const title = `${race} cases per 10,000`; const chart = html`

${legend({ color, title, width: 110, tickSize: 5, height: 45 })}

`; return chart; }34:[{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1597969493581.522,"size":842177}] 2f:{"title":"NY Times COVID-19 Cases by Race/Ethnicity","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`## Case Rates by Race / Ethnicity\n\nThese maps depict the COVID case rates by race/ethnicity per 10,000 people at the county level. Conversely some of the NY Times maps from the linked story depict where rates for non-whites were 2x – 4x or more than whites. Data is only shown for where it was reported and where the race/ethnic group makes up more than 1% of the total population. As such these maps are not a complete picture of COVID-19 by race/ethnicity in the United States.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof smallMultiples = checkbox({\n description: \"Render maps as small multiples vs. a list of larger maps.\",\n options: [{ value: \"true\", label: \"Small Maps\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"// useful to disable for editing to prevent event blocking re-renders & layout shifts\nviewof renderCharts = checkbox({\n options: [{ value: \"true\", label: \"Render All Maps\" }],\n value: \"true\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`Render a map for a random race / ethnicity for debugging & development:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"test = {\n const categories = Object.keys(colorRamps);\n const race = categories[Math.floor(Math.random() * categories.length)];\n const map = renderMap({\n race,\n color: colorRamps[race],\n field: `${race}_rate`\n });\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"dims = ({\n width: width / 2,\n height: (width / 2) * aspectRatio,\n padding: 6\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"aspectRatio = 0.6256410256","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"projection = d3\n .geoAlbersUsa()\n .fitExtent(\n [\n [dims.padding, dims.padding],\n [dims.width - dims.padding, dims.height - dims.padding]\n ],\n topojson.feature(us, us.objects.nation)\n )\n// .scale(1300)\n// .translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"colorScale = d3.scaleThreshold().domain([25, 50])","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"// color ramps were copied from the maps in the NYT story linked to at the top of this notebook.\ncolorRamps = ({\n black: [\"#EEDBD9\", \"#DDBAB6\", \"#B36056\"],\n hispanic: [\"#FAECD6\", \"#FADFBC\", \"#F4C17D\"],\n native: [\"#E5E3E8\", \"#B8ADBE\", \"#7E6B8A\"],\n asian: [\"#DAE4E7\", \"#ADC1CC\", \"#85A4B2\"],\n white: [\"#CDDED8\", \"#A2C1B5\", \"#629685\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"sampleDatum = cartoData.features[\n Math.floor(Math.random() * cartoData.features.length)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## CARTO Config & Data\n\nThis data is stored in a [CARTO.com](https://carto.com) account but might as well be stored in a local CSV file. I joined it to 2017 census county boundaries so that it doesn't need to be joined client side. Other map boundaries are however rendered using the [us-atlas topojson](https://github.com/topojson/us-atlas).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"cartoUserName = \"henrick2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"cartoTableName = \"nytimes_covid19_race_data_joined_geom\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"cartoApiKey = \"default_public\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"cartoQuery = `SELECT * FROM ${cartoTableName}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"cartoDataFormat = \"GeoJSON\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"cartoDataURI = `https://${cartoUserName}.carto.com/api/v2/sql?q=${encodeURIComponent(\n cartoQuery\n)}&api_key=${cartoApiKey}&format=${cartoDataFormat}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"cartoData = d3.json(cartoDataURI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}