31:T4f4,// Take the array of objects from our cartogram, and add `data` to them formatted_data = statesData.map(d => { // Filter down the NYT data to the current state, then construct the data object for this state let data = raw_data .filter(dd => dd.location == d.state_full) .map(dd => { return { key: dd.date, value: +dd.totdea_mean }; }) .sort((a, b) => new Date(a) - new Date(b)); const by_day_data = data.map((dd, i) => { let new_deaths = 0; if (i === 0) new_deaths = dd.value; else { new_deaths = data[i].value - data[i - 1].value; } return { key: dd.key, value: new_deaths }; }); // Get deaths per day by subtracting value from yesterday (data is cumulative deaths) d.state = d.state_full; // for naming consistency // Calculate the total for the state and first date d.total = d3.sum(by_day_data, dd => +dd.value); let maxVal = d3.max(by_day_data, dd => +dd.value); d.x_min = by_day_data.filter(dd => dd.value === maxVal)[0].key; // naming convention is misleading here // Format the date const date_pieces = d.x_min.split("-"); const x_min_label = parseDate( new Date(2020, date_pieces[1] - 1, date_pieces[2]) ); d.x_min_label = x_min_label; d.data = by_day_data; return d; })32:[{"id":"e832fd998f4157b6e3b37b3d5e89cf171223c601acb8232075c0b23dee2501aeb64549bfc0551bb825f9c9b80238fe478d732d04dd3760d18c003b13d2ef330b","href":"https://static.observableusercontent.com/files/e832fd998f4157b6e3b37b3d5e89cf171223c601acb8232075c0b23dee2501aeb64549bfc0551bb825f9c9b80238fe478d732d04dd3760d18c003b13d2ef330b","name":"hospitalization_all_locs_corrected@1.csv","type":"text/csv","lastModified":1585408373179.943,"size":1794488},{"id":"203521490191dc8dc3808393536a9ab91a2fd7f81a64b6a8117e10a030ace1ca54e218ab30d9a74d2e11ebc22b4bf7bd603d5070cf4fc3bed7fb600cea75cbc9","href":"https://static.observableusercontent.com/files/203521490191dc8dc3808393536a9ab91a2fd7f81a64b6a8117e10a030ace1ca54e218ab30d9a74d2e11ebc22b4bf7bd603d5070cf4fc3bed7fb600cea75cbc9","name":"hospitalization_all_locs_corrected@2.csv","type":"text/csv","lastModified":1585617753452.574,"size":1752493},{"id":"db453bd6f6ea655383d8d4817b80b509f966bd06ba2f23d079d48955f5dd85f6ea6aa882835539abb36ae3f0a0108f1e56f8ac91d317bdeee91e528571c86676","href":"https://static.observableusercontent.com/files/db453bd6f6ea655383d8d4817b80b509f966bd06ba2f23d079d48955f5dd85f6ea6aa882835539abb36ae3f0a0108f1e56f8ac91d317bdeee91e528571c86676","name":"Hospitalization_all_locs.csv","type":"text/csv","lastModified":1586110786162.279,"size":1912786}] 2f:{"title":"Projected COVID-19 Deaths","cells":[{"id":0,"value":"md`# Projected COVID-19 Deaths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`I was curious about how the small multiples cartogram design from [the New York Times](https://www.nytimes.com/interactive/2020/03/21/us/coronavirus-us-cases-spread.html) could be used to display the projections from [IHME](https://covid19.healthdata.org/projections). For more on the process of building this, see [this notebook](https://observablehq.com/@mkfreeman/recreating-nyt-u-s-cases-map).\n\n_Last updated 4/5, with IHME data released 4/2_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`### Loading + Filtering Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"// Load the data with `d3.csv()`\nraw_data = d3.csvParse(\n await FileAttachment(\"Hospitalization_all_locs.csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"render_table(raw_data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"md`### Scales + Labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"// Store a list of dates for our x scale\ndates = {\n // (need to find the min / max in the data)\n const all_dates = [];\n formatted_data.forEach(d => {\n d.data.forEach(dd => {\n if (all_dates.indexOf(dd.key) == -1) all_dates.push(dd.key);\n });\n });\n return all_dates.sort((a, b) => new Date(a) - new Date(b)); // sort!\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"// Get the maximum value (for the Y scale)\nmax_value = d3.max(formatted_data, d => d3.max(d.data.map(dd => +dd.value)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"// Define our own x scale\nmy_x = d3\n .scaleBand()\n .domain(dates)\n .range([0, state_size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"// Define our own y scale\nmy_y = d3\n .scaleLinear()\n .domain([0, max_value])\n .range([0, state_size + 150])","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"// Also setting the formatter\nmy_format = d3.format(\".2s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"my_first_x_label = \"Most deadly day\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"my_y_height_label = \"New deaths each day\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"my_total_label = \"Total deaths\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"my_title = \"Number of Projected Deaths Per Day\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"// Importing my own version of the chart, with the data, labels, and scales specified\nimport { chart, state_size, statesData } with {\n formatted_data as cartogram_data,\n my_title as title,\n my_first_x_label as first_x_label,\n my_total_label as total_label,\n my_y_height_label as y_height_label,\n my_x as x,\n my_format as format,\n my_y as y\n} from \"@mkfreeman/small-multiple-chart-cartogram/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`#### Helpers, Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"parseDate = d3.timeFormat(\"%b. %d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"// Function to render a table\nrender_table = options => html`\n ${Object.keys(options[0]).map((d, i) => {\n let label = d;\n return ``;\n })}\n\n \n ${options.map(row => {\n return html`${Object.values(row).map(col => {\n return ``;\n })}`;\n })}\n \n

${label}
${col}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}