2d:null 2e:["$","title",null,{"children":"COVID-19 US Map | Leonel Galán | Observable"}] 33:T885,map = { const nf = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const width = 744 * (preview ? 1 : multiplier); const height = 296 * (preview ? 1 : multiplier); const rateFormat = d3.format('.2r'); const projection = d3 .geoAlbersUsa() .translate([width / 2, height / 2]) .fitSize([width, height], json); const path =d3.geoPath() .projection(projection); const svg = d3.select(DOM.element('svg')) .attr('width', width) .attr('height', height); svg.call(addWebFont, 'Lato', 'https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2') svg.append('text') .attr('x', (width / 2)) .attr('y', 0) .attr('text-anchor', 'middle') .attr('font-size', '16px') .attr('style', "font-family: 'Lato'") .text('Foo Bar'); for (let i = 0, max = data.length; i < max; i++) { const fips = data[i][0] const dataValue = data[i][Number(metric)] for (let j = 0, jmax = json.features.length; j < jmax; j++) { const jsonId = json.features[j].id; if(fips === jsonId) { json.features[j].properties.value = dataValue; break; } } } svg.selectAll("path") .data(json.features) .enter().append("path") .attr("d", path) .style('stroke', 'white') .style('fill', (d) => { const value = d.properties.value; return value ? mapColor(value) : noDataColor; }) .attr('stroke', '#ccc') .on('touchmove mousemove', function(d) { const value = nf.format(d.properties.value); const name = d.properties.name; const [x, y] = d3.mouse(this) tooltip .attr('transform', `translate(${x},${y})`) .call(callout, `${name}: ${value || 'N/A'}`); }) .on('touchend mouseleave', () => tooltip.call(callout, null)); yield svg.node(); svg.append('g') .attr('style', "font-family: 'Lato';") .attr('transform', `translate(${600 * (preview ? 1 : multiplier)}, ${100 * (preview ? 1 : multiplier)}) scale(${preview ? 1 : multiplier}, ${preview ? 1 : multiplier})`) .call(legend); const tooltip = svg.append('g'); }34:[] 31:{"id":"0679fc5de44f4a60","slug":"covid-19-us-map","title":"COVID-19 US Map","thumbnail":"45ed4de6bbe15c15a40df144e951509c84c344dbafbf5d4dcd92ee4faf857d20","access_level":"public","create_time":"$D2020-04-17T14:58:54.278Z","update_time":"$D2020-04-17T17:34:58.079Z","view_time":null,"first_public_time":"$D2020-04-27T18:33:04.754Z","has_unpublished_edits":null,"fork":{"id":"57e6e3a17bb20952","slug":"d3-v4-map-with-geojson","title":"US Map","owner":{"id":"08803bed5855b191","login":"leonelgalan","name":"Leonel Galán"}},"stars":0,"starred":false,"owner":{"type":"team","id":"08803bed5855b191","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":"starter_2024"},"version":692,"publish_version":692,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9c12cd818087e4b","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":null}],"members":[{"type":"individual","id":"b9c12cd818087e4b","login":"leonelgalan","name":"Leonel Galán","avatar_url":"https://avatars-next.observableusercontent.com/40c238eeb4b1cd55df10deb2c6c6f6b1c96337f0ee41c76a5d5636bd81f4ae4a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"COVID-19 US Map","cells":[{"id":0,"value":"md`\n# COVID-19 US Map\n\nCurrent data from [_The COVID Tracking Project_](https://covidtracking.com/) and the [Population Estimates APIs of the _United States Census Buraeu_](https://www.census.gov/data/developers/data-sets/popest-popproj/popest.html)\n\n## Select Metric\n\n* Positive\n* Positive per 1K\n* Hospitalized Currently\n* Hospitalized Currently per 1K\n* Deaths\n* Deaths per 1K\n* Total Test Results\n* Total Test Results per 1K\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"viewof metric = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"md`\n## Preview/Export\nUnselect before saving to PNG to get the full resolution.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"viewof preview = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"DOM.download(() => rasterize(map), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"md`\n\n## Colors\n\nIn order: color1, color2, noDataColor\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof color1 = colorPicker('fcfcfc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"viewof color2 = colorPicker('#111111')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof noDataColor = colorPicker('#eee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"data = {\n const response = await d3.json('https://covidtracking.com/api/v1/states/current.json')\n return response.map(({fips,state,positive,hospitalizedCurrently,death,totalTestResults}) => {\n const populationBy1K = populationByState[state] / 1000\n if (populationBy1K) return [\n fips,\n positive,\n positive / populationBy1K,\n hospitalizedCurrently,\n hospitalizedCurrently / populationBy1K,\n death,\n death / populationBy1K,\n totalTestResults,\n totalTestResults / populationBy1K,\n ]\n }).filter(x => x)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"populationByState = {\n const response = await d3.json('https://api.census.gov/data/2019/pep/population?get=STATE,POP&for=state:*')\n return response.reduce((result, state) =>{\n const twoLetter = states.get(state[0]);\n if (twoLetter) result[twoLetter] = Number(state[1])\n return result\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"legend = {\n let totals = data.map(d=>Number(d[Number(metric)])).sort((a, b) => a - b);\n let cells = d3.range(6).map(p => Math.ceil(d3.quantile(totals, p / 5)));\n cells = Array.from(new Set(cells)); \n return d3.legendColor()\n .labelFormat(d3.format(\",.0f\"))\n .shapeWidth(40)\n .cells(cells)\n .orient('vertical')\n .scale(mapColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"mapColor = {\n const interpolator = d3.interpolateRgb(color1, color2);\n\tconst scale = d3.scaleSequentialLog(interpolator).domain(d3.extent(data, row => row[Number(metric)]));\n return scale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"multiplier = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"json = d3.json(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"d3-svg-legend@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"import {states} from '@mbostock/working-with-the-census-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"import { addWebFont } from '@leonelgalan/embedding-fonts-into-an-svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"import {colorPicker} from '@shaunlebron/color-picker'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"