2b:null 2c:["$","title",null,{"children":"Cases in points | Benjamin Schmidt | Observable"}] 31:T606,redraw = { const current_pane = mutable tick++ % canvases.length const ctx = canvases[current_pane].getContext("2d") ctx.globalAlpha = 1 ctx.clearRect(0, 0, width, height) const draw_flags = [ variables_to_draw.indexOf("Confirmed cases") > -1, variables_to_draw.indexOf("Deaths") > -1] const size_baseline = Math.exp(time_per_real_second) < 20 ? 10 : Math.exp(time_per_real_second) < 120 ? 4 : 1 for (let i = 0; i < generated_points.x_array.length; i++) { const rix = randoms[i % randoms.length] const num = generated_points.field_array[i] const which = generated_points.field_array[i]; if (!draw_flags[which]) {continue} ctx.fillStyle = which == 0 ? "#EEEEEE" : "#d7191c"; ctx.fillRect(generated_points.x_array[i] + rix[0], generated_points.y_array[i] + rix[1], // A trick to make the deaths 4x4 and the non-deaths 1x1 size_baseline * (which * 3 + 1), size_baseline * (which * 3 + 1)) if (which == 1) { mutable total_deaths_drawn++ } } const root_ctx = foreground.getContext("2d") root_ctx.clearRect(0, 0, width, height) const current_tick = tick % canvases.length root_ctx.globalAlpha = .1 root_ctx.globalAlpha = 1 for (let i = canvases.length + current_pane; i > current_pane; i--) { const predrawn = canvases[i % canvases.length] root_ctx.drawImage(predrawn, 0, 0) root_ctx.globalAlpha = root_ctx.globalAlpha * .83 } }32:T715,hopkins_parser = async function(metric = "confirmed") { const hopkins = aq.fromCSV(await fetch(`https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_${metric}_US.csv`).then(d => d.text())) const date_names = hopkins.columnNames().map(d => [d, new Date(Date.parse(d))]).filter(d => Date.parse(d[0])).map(d => d[1].toISOString().slice(0, 10)) const t2 = hopkins .select(aq.not(["Lat", "Long", "Long_", "code3", "iso3", "iso2", "UID", "Admin2", "Province_State", "Country_Region"])) .derive({FIPS: d => op.padstart(d.FIPS, 5, "0")}) .fold(aq.range(2, hopkins.numCols() - 1)) .groupby(["FIPS", "Combined_Key"]) .orderby("key") .rollup({values: d => op.values(d.value)}) const counts = new Float32Array(date_names.length) const rolling = new Float32Array(date_names.length) const pingpong = new Float32Array(date_names.length) const datecounts = new Map() for (let row of t2) { // return row const val = row.values counts[0] = 0 let smooth = 2 for (let i = 1; i < val.length; i++) { counts[i] = val[i] > val[i-1] ? val[i] - val[i-1] : 0 } for (let i = 0; i < smooth; i++) { rolling[i] = d3.mean(counts.slice(0, i)) } for (let i = smooth; i < counts.length; i ++) { rolling[i] = d3.mean(counts.slice(i-smooth, i + 1)) } pingpong.fill(0) // NB this must be even or else counts and delta have to be switched. //blur(rolling, pingpong, 4) if (!datecounts.get(row.FIPS)) { datecounts.set(row.FIPS, new Map()) } let fipcounts = datecounts.get(row.FIPS) for (let i = 0; i < rolling.length; i++) { const date = date_names[i] fipcounts.set(date, rolling[i]) } } return datecounts }33:[{"id":"dc0212d3e50c82adc04210447136f184dc5fd64315bf2a9c82d5bb1360da3cf675b3fd20989c549fa5bac34d2b3a20595636b08927b4729088b2c623008952cf","href":"https://static.observableusercontent.com/files/dc0212d3e50c82adc04210447136f184dc5fd64315bf2a9c82d5bb1360da3cf675b3fd20989c549fa5bac34d2b3a20595636b08927b4729088b2c623008952cf","name":"cities.csv","type":"text/csv","lastModified":1610118713783.514,"size":1024512}] 2f:{"id":"7b11b6ca02f0190e","slug":"cases-in-points","title":"Cases in points","thumbnail":"651f4b1b54d1fe14c5f57a48a65865c8e5464a3a09503b8e3f4acf976daa62cf","access_level":"public","create_time":"$D2021-01-07T15:11:23.494Z","update_time":"$D2021-01-14T01:36:31.430Z","view_time":null,"first_public_time":"$D2021-01-08T17:08:09.207Z","fork":{"id":"2c5ac2e98d00030b","slug":"fluid-dot-density","title":"Fluid dot density maps in canvas.","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"stars":4,"starred":false,"owner":{"type":"team","id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":"starter_2024"},"version":2240,"publish_version":2240,"role":null,"authored":false,"authors":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null}],"members":[{"type":"individual","id":"33354ca265b21f01","login":"bmschmidt","name":"Benjamin Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/addc2adb5ec95cc72a64820e4a08488bad5d48d95a895eef85a45b136ed66792","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cases in points","cells":[{"id":0,"value":"md`# Cases in points\n\nAs the pandemic gets worse, the numbers get more numbing. Enough abstraction. Here's every single reported coronavirus case as a pixel to your screen. Cases are small white dots. Deaths are larger red squares. You can speed up or slow the animation, but there will always be a one-to-one correspondence between cases and deaths. Points are randomly generated in the proper county every animation frame using the fast point-in-polygon algorithm I developed [here](https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl) and [here](/@bmschmidt/dot-density).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1455,"value":"viewof time_per_real_second = slider({title: \"Time represented by each second of the animation\", min: 0, max: Math.log(60 * 60 * 24 * 7), value: Math.log(60), format: x => {\n const v = Math.exp(x);\n const as_seconds = v\n if (as_seconds > 60 * 60 * 24) {\n return Math.floor(as_seconds / 60 / 60 / 24) + \" days, \" + Math.round(Math.floor(as_seconds/60/60) % 24) + \" hours.\"\n }\n if (as_seconds > 3600) {\n return Math.floor(as_seconds / 3600) + \" hours, \" + Math.round(Math.floor(as_seconds/60) % 60) + \" minutes.\"\n }\n if (as_seconds > 60) {\n return Math.round(as_seconds / 60) + \" minutes, \" + Math.round(as_seconds % 60) + \" seconds.\"\n } \n else {\n return Math.round(as_seconds) + \" seconds\"\n\n }\n\n}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1598,"value":"{\n const d = new Date(date_ms)\n return md`## ${d.toLocaleDateString()} ${d.toTimeString().slice(0, 5)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1137,"value":"canvas = {\n // First draw requires full preparation\n redraw\n return html`\n${foreground}\n${bkgd}\n\n`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":851,"value":"{\n let t = `\n\n${ddate} had \n${d3.format(\",\")(Math.floor(daily_confirmed))} new cases\nand\n${d3.format(\",\")(Math.floor(daily_deaths))} new reported deaths.\n\nThat daily case count is roughly the population of ${get_closest_city(daily_confirmed)}.\n\nYou've seen ${d3.format(\",\")(total_deaths_drawn)} deaths since opening this website.\n`\n if (total_deaths_drawn > 20000) {\n t += ` (About the population of ${get_closest_city(total_deaths_drawn)}.)` \n } else {\n t += `That's ${d3.format(\".2%\")(total_deaths_drawn/total_deaths)} of the way there.`\n }\n return md`${t}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2060,"value":"viewof date_ms = slider({title: \"Date\", description: \"Drag the slider to chagne\", min: +dates[0], max: +dates[dates.length-1], format: d => new Date(d).toISOString().slice(0, 16).replace(\"T\", \" \"), value: +new Date(\"2021-01-07\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1742,"value":"viewof just_state = {\n const options = [{\"value\" : \"\", label: \"All States\"}]\n for (let state of state_array) {\n options.push({label: state.name, value: state.fips}) \n }\n return select({\"title\": \"Show a single state\", options})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"viewof variables_to_draw = checkbox({title: \"Show\", options: [\"Confirmed cases\", \"Deaths\"], value: [\"Confirmed cases\", \"Deaths\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"viewof PIXEL_STD = slider({min: 0, max: 20, value: 0, description: \"If you really want to see the New York toll in April/May, you'll need to turn this up.\", title: \"Random jitter in pixels\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1638,"value":"md`# Caveats and credits\n\nData is from Johns Hopkins.\n\nNot all cases and deaths are reported. In the early days of the pandemic, cases were more heavily underreported than now. Points show the date of new reports, which may not correspond to the date that the actual death happened. (For instance, New York reported a large number of new deaths in early August.\n\nCounts are a three-day moving average. Reporting is lower on weekends and holidays.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"reset_date_when_over_max = {\n // Restart at the beginning once we've wrapped around plus 24 hours\n if (date_ms >= 1000 * 60 * 60 * 24 + dates[dates.length - 1]) {\n viewof date_ms.setValue(+dates[45])\n }\n return date_ms\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"import { countyShapes } from '@enjalot/county-boundaries'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1739,"value":"geojson.features[3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"geojson = { \n const output = { \"type\": \"FeatureCollection\", features: []}\n \n output.features = countyShapes.features.filter(shape => {\n const d = deaths.get(shape.id)\n if (just_state !== \"\") {\n if (shape.id.slice(0, 2) !== just_state) {\n // Dropping counties not in this state.\n return false \n } \n }\n const c = confirmed.get(shape.id)\n if (!d) {return false}\n for (let [k, v] of d.entries()) {\n shape.properties[\"d-\" + k] = v\n }\n for (let [k, v] of c.entries()) {\n shape.properties[\"c-\" + k] = v\n }\n return true\n })\n return output \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"time_delta = {\n // Automatically tick the time however much is needed.\n let last = Date.now()\n while (true) {\n let time_since_last = Date.now() - last\n last = Date.now()\n viewof date_ms.setValue((viewof date_ms).value + time_since_last * Math.exp(time_per_real_second))\n yield time_since_last\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1134,"value":"bkgd = DOM.element(\"canvas\", {width, height})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"foreground = DOM.element(\"canvas\", {width, height, style: \"position: fixed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1952,"value":"canvases = d3.range(20).map(d => DOM.element(\"canvas\", {width, height, style: \"position: fixed\"}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"featureset = projected_geojson","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"import { dot_density } from '@bmschmidt/dot-density'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"mutable tick = {\n return 0\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1460,"value":"N_REPRESENTED = {\n return current_fps * 60 * 60 * 24 / (Math.exp(time_per_real_second))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1364,"value":"cities_raw = d3.csvParse(await FileAttachment(\"cities.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1774,"value":"cities = {\n let useful\n if (just_state == \"\") {\n useful = cities_raw.filter(d => +d['1880'] > 10 && +d['1930'] > 500 && d['2010'] > 2 * d['1880'] && !d.title.match(\"ownship|Babylon\"))\n } else {\n useful = cities_raw.filter(d => {\n const t = d.title.split(\", \")\n t.reverse()\n const st = t[0]\n return (state_info.get(just_state).name == st)\n })\n }\n const pairs = useful.map(d => [+d['2010'], d.title]).filter(d => d[0] && d[1] != \"NA\")\n pairs.sort((a, b)=> a[0] - b[0])\n return pairs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"state_info.get(just_state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"get_closest_city = function(number) {\n return cities[d3.bisector(d => d[0]).center(cities, number)][1]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2175,"value":"ddate = {\n return new Date(date_ms).toISOString().slice(0, 10)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1954,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1418,"value":"mutable total_deaths_drawn = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"background_map = {\n const ctx = bkgd.getContext(\"2d\")\n ctx.fillStyle = \"#222222\"\n ctx.globalAlpha = 1;\n ctx.fillRect(0, 0, width, height)\n ctx.globalAlpha = 1;\n const p = d3.geoPath(my_projection)\n p.context(ctx)\n let i = 0\n for (let feature of states.features) {\n ctx.strokeStyle = \"rgba(255, 255, 255, .1)\"\n ctx.beginPath()\n p(feature)\n ctx.stroke()\n }\n ctx.strokeStyle = \"rgba(255, 255, 255, .17)\"\n ctx.beginPath()\n p(country)\n ctx.stroke()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"states = d3.json(\"https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"country = d3.json(\"https://raw.githubusercontent.com/scdoshi/us-geojson/master/geojson/nation/US.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1555,"value":"mutable current_fps = 1000/time_delta","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"md`## Random jitter\n\nPrecalculate a little random jitter rather than run it every tick.\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"randoms = {\n const randoms = []\n const radius_generator = d3.randomNormal(0, PIXEL_STD)\n for (let i = 0; i < 5000; i++) {\n const theta = Math.random() * Math.PI * 2\n const r = radius_generator()\n randoms.push([Math.cos(theta) * r, Math.sin(theta) * r])\n }\n return randoms\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"projected_geojson = d3.geoProject(geojson, my_projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"my_projection = {\n \n if (just_state === \"\") return betterAlbers().scale(width * 1.2).translate([width/2, height/2])\n \n const proj = d3.geoAlbers()\n .fitExtent([[10, 10], [width, height]], geojson);\n return proj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"import { geoAlbersUsaPr as betterAlbers } from '@almccon/u-s-map-with-puerto-rico-us-virgin-islands-american-samoa-gua'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"height = width * .66","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"fields =\n [\"c-\", \"d-\"].map(lab => lab + ddate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"import {checkbox, radio} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"fields","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2210,"value":"daily_deaths = Math.round(d3.sum([...deaths.values()].map(d => d.get(ddate))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2224,"value":"daily_confirmed = Math.round(d3.sum([...confirmed.values()].map(d => d.get(ddate))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":866,"value":"confirmed = hopkins_parser(\"confirmed\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1913,"value":"d3.sum([...confirmed.get('36081').entries()].filter(d => d[0] < \"2020-09-01\"), d=> d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"deaths = hopkins_parser(\"deaths\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1745,"value":"import { states as state_array, state_info } from '@bmschmidt/state-info'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":859,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"function blur(ping, pong, passes=1) {\n if (passes == 0) {\n return \n }\n for (let i=1; i < ping.length-1; i++) {\n pong[i] = (ping[i-1] + ping[i] + ping[i+1])/3\n }\n pong[0] = (ping[0] + ping[1])/2\n pong[pong.length-1] = (ping[pong.length-1] + ping[pong.length-2])/2\n blur(pong, ping, passes-1)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"import {date as dateView, select, slider} from \"@severo/inputs-setter\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1608,"value":"total_deaths = d3.sum([...deaths.values()].map(d => [...d.values()]).flat())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":902,"value":"dates = [...deaths.get(\"01001\").keys()].map(d => new Date(Date.parse(d)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"generated_points = {\n // The first call here will also generate the triangulation.\n const points = dot_density(featureset, fields, N_REPRESENTED)\n yield points\n \n while (true) {\n const points = dot_density(featureset, fields, N_REPRESENTED)\n yield points\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3@v6\", \"d3-geo-projection\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"