31:T582,// Make a legend! legend = { if (by_location_diffs.length === 0) return "No Data Found"; let sample_data = makeSampleData(); console.log("sample_data", sample_data); const svg = d3 .create("svg") .attr('height', chart_height) .attr("width", width); const g = svg .append('g') .attr('transform', `translate(${(width - chart_width) / 2}, 0)`); const legend = g.selectAll('g').data([sample_data], d => d.key); legend.join(enter => enter.append("g").call(drawChart)); // Axis label svg .append("text") .attr( 'transform', `translate(${(width - chart_width) / 2}, ${chart_height / 2})` ) .style("text-anchor", "end") .text( `Change in ${metric_options.find(d => d.value == options.metric).label} ` ) .style('font-size', '12px'); // Increase label g.append("text") .text("Estimates ↑") .attr( "transform", `translate(${margin.left + chart_width / 4 - 5},${chart_height / 4} )` ) .style("text-anchor", "middle") .style('fill', "red") .style('font-size', '10px'); // Decrase label g.append("text") .text("Estimates ↓") .attr( "transform", `translate(${margin.left + (chart_width / 3) * 1.8},${(chart_height * 2.9) / 4} )` ) .style("text-anchor", "middle") .style('fill', "blue") .style('font-size', '10px'); return svg.node(); }32:T578,viewof options = form(html``)33:T5cf,chart = { // Create a containing SVG const viewportWidth = 1000; const svg = d3 .create("svg") .attr("viewPort", [0, 0, 1000, 1000]) .attr("width", width) .attr("height", height); // Create a G for each location let locations = svg .selectAll("g.location") .data(by_location_diffs, d => d.key); // For each (entering) G, call the `drawChart()` function locations.join(enter => enter .append('g') .attr("transform", (d, i) => `translate(${x_column(i)}, ${y_column(i)})`) .call(drawChart) ); // Add tooltip const tooltip = svg.append("g").attr("id", "tooltip"); // Render the tooltip on area elements (created through drawChart()) svg .selectAll(".area path") .on("mouseover", function(d) { const pathClass = d3.select(this).attr("class"); tooltip.call(callout, getHoverText(d, pathClass), pathClass).raise(); }) .on("mousemove", function(d) { const position = d3.mouse(svg.node()); let x = position[0]; // Ensuring tooltip doesn't run off the screen const bBox = tooltip.node().getBBox(); if (x < bBox.width / 2) { x = bBox.width / 2; } else if (x + bBox.width / 2 > width) { x = viewportWidth - bBox.width; } let y = position[1] - 56; tooltip.attr("transform", `translate(${x}, ${y})`); }) .on("mouseout", function() { tooltip.call(callout, null); }); // Render the chart return svg.node(); }34:T59e,// Aggregate the data by location and date by_location_diffs = d3 .nest() // group by... .key(d => d.location_name) // location... .key(d => d.date) // and date.... .rollup(v => { // Find the observation from the selected models let m1_obj = v.find(d => d.model_version == options.model1); let m2_obj = v.find(d => d.model_version == options.model2); // Return 0 if this date isn't estimated in the model let m1 = m1_obj === undefined ? 0 : +m1_obj[options.metric]; let m2 = m2_obj === undefined ? 0 : +m2_obj[options.metric]; return { m1: m1, m2: m2, diff: m1 - m2 }; }) .entries(curr_models) // Sort by the *sum* of the absolute values of the difference across each *location* .sort( (a, b) => d3.sum(b.values, d => Math.abs(d.value.diff)) - d3.sum(a.values, d => Math.abs(d.value.diff)) ) // Calculate the *net change* to display for the location .map(d => { d.net_change = d3.sum(d.values, dd => dd.value.diff); d.net_increase = d3.sum( d.values.filter(dd => dd.value.diff > 0), dd => dd.value.diff ); d.net_decrease = d3.sum( d.values.filter(dd => dd.value.diff < 0), dd => dd.value.diff ); return d; }) // Search for countries .filter(d => options.search.length === 0 ? true : d.key.toLowerCase().includes(options.search.toLowerCase()) ) // Get the top 25 .slice(0, 25)35:T72d,// Function to draw a chart in a selected element drawChart = function(el) { // X axis (enter) el.selectAll("g.xaxis") .data(d => [d.key]) .join(enter => enter .append("g") .attr("transform", `translate(0,${chart_height - margin.bottom})`) .attr("class", "xaxis") .call(d3.axisBottom(x).ticks(5)) ); // Y axis (enter) el.selectAll("g.yaxis") .data(d => [d.key]) .join(enter => enter .append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "yaxis") .call( d3 .axisLeft(y) .ticks(5) .tickFormat(d3.format(".2s")) ) ); // Add a horizontal line el.append("line") .attr("x1", margin.left) .attr("x2", chart_width) .attr("y1", y(0)) .attr("y2", y(0)) .style("stroke", "#d3d3d3") .style("stroke-width", ".5px"); // Title (enter) const title = el .append("text") .attr("transform", `translate(${(chart_width + margin.left) / 2},15)`) .attr("class", "title"); const spans = title.selectAll("tspan").data(d => { return [d.key, d.net_change]; }); spans.join(enter => enter .append("tspan") .text((d, i) => { if (i === 0) { return getTitle(d); } else if (d === "Net Change") { return "(Net change)"; } else { const sign = d > 0 ? "+" : ""; return " (" + sign + formatter(d) + ")"; } }) .style("fill", (d, i) => { if (i === 0) return "black"; return d > 0 ? "rgb(238, 93, 93)" : "rgb(16, 104, 201)"; }) ); // Draw the data el.selectAll("g.area") .data(d => [d]) .join(enter => enter .append("g") .attr("class", "area") .call(drawArea) ); }36:T4b1,// small modifications from @d3/line-chart-with-tooltip callout = (g, value, eleClass = "none") => { if (!value) return g.style("display", "none"); g.style("display", null) .style("pointer-events", "none") .style("font", "13px sans-serif"); const path = g .selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", () => { switch (eleClass) { case "none": return "black"; case "increase": return "red"; case "decrease": return "blue"; } }); const text = g .selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .style("font-weight", (_, i) => (i ? null : "bold")) .attr("class", (_, i) => (i ? "tip-description" : "tip-title")) .text(d => d) ); const { x, y, width: w, height: h } = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); }37:[{"id":"10d9d1fe4c8f37749ab10972cff9466f0f4e708906d79cd83acb70ab1da0a31bc584b4911a683b01ccd43a858e240e56784f7617340fb9163335005b6515bc7d","href":"https://static.observableusercontent.com/files/10d9d1fe4c8f37749ab10972cff9466f0f4e708906d79cd83acb70ab1da0a31bc584b4911a683b01ccd43a858e240e56784f7617340fb9163335005b6515bc7d","name":"country_names.csv","type":"text/csv","lastModified":1586544432778.856,"size":2336},{"id":"0a128c226586ecf50c0dccccc238d0bcb9984554f655521b87af98cf246ec5b9ac64caeb528bbf9c31488f7a443cbe08c518507ccdc1518d361fae41aca4431c","href":"https://static.observableusercontent.com/files/0a128c226586ecf50c0dccccc238d0bcb9984554f655521b87af98cf246ec5b9ac64caeb528bbf9c31488f7a443cbe08c518507ccdc1518d361fae41aca4431c","name":"state_names.csv","type":"text/csv","lastModified":1586541499596.957,"size":611}] 2f:{"title":"IHME Model Comparisons","cells":[{"id":0,"value":"md`# IHME Model Comparisons\nVisualizing **differences** in model predictions from IHME. This tool compares the _change_ in estimates between two selected models. Data from [this repository](https://github.com/mccoates/ihme_covid_ests), downloaded daily from the [IHME Projection Tool](https://covid19.healthdata.org/projections).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`Below are the top 25 locations with the largest **total absolute change** in estimates of _${\n metric_options.find(d => d.value == options.metric).label\n}_, between the model labeled ${options.model1} and the model labeled ${\n options.model2\n}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"imports = md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@v5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"// For the legend\nmakeSampleData = () => {\n let sample_data = _.clone(by_location_diffs[0]);\n sample_data.key = \"Location Name\";\n (sample_data.net_change = \"Net Change\"),\n (sample_data.values = sample_data.values.filter(\n d =>\n date_parser(d.key) > date_parser(min_date) &&\n date_parser(d.key) < date_parser(max_date)\n ));\n\n sample_data.values = sample_data.values.map((d, i) => {\n return {\n key: d.key,\n value: {\n diff:\n (Math.sin((i / sample_data.values.length) * 6.3) * y.domain()[1]) / 2\n }\n };\n });\n return sample_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"state_names = d3.csv(\n await FileAttachment(\"state_names.csv\").url(),\n d => d.location_name\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"country_names = d3.csv(\n await FileAttachment(\"country_names.csv\").url(),\n d => d.location_name\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"// Load all data\ndata = d3.csv(\n \"https://raw.githubusercontent.com/mccoates/ihme_covid_ests/master/output/model_comparison_data.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"metric_options = [\n { value: \"bedover_mean\", label: \"Shortage of Hospital Beds\" },\n { value: \"deaths_mean\", label: \"Number of Deaths\" },\n { value: \"icuover_mean\", label: \"Shortage of ICU Beds\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"// Get the list of models in the data\nmodel_options = _.uniqBy(data, d => d.model_version).map(d => d.model_version)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"// Filter down to observations from current models\ncurr_models = data\n .filter(\n d => d.model_version == options.model1 || d.model_version == options.model2\n )\n .filter(d => {\n return options.location == \"us_states\"\n ? state_names.indexOf(d.location_name) !== -1\n : country_names.indexOf(d.location_name) !== -1;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`### Drawing Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"getTitle = str => (str.length < 15 ? str : str.slice(0, 12) + \"...\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"drawArea = function(el) {\n // Draw areas greater than 0\n const increases = el.selectAll(\"path.increase\").data(d => {\n return [d];\n });\n\n increases.join(\n enter =>\n enter\n .append(\"path\")\n .attr(\"class\", \"increase\")\n .attr(\"fill\", increase_color)\n .attr(\"stroke\", \"none\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", d => {\n return area_function(d);\n }),\n update => update.transition().duration(500)\n );\n\n // Draw areas less than 0\n const decreases = el.selectAll(\"path.decrease\").data(d => [d]);\n\n decreases.join(\n enter =>\n enter\n .append(\"path\")\n .attr(\"class\", \"decrease\")\n .attr(\"fill\", decrase_color)\n .attr(\"stroke\", \"none\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", d => {\n return area_function(d, \"decrease\");\n }),\n update => update.transition().duration(500)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"getHoverText = (d, eleClass) => {\n console.log(d, eleClass);\n const character = eleClass == \"increase\" ? \"↑\" : \"↓\";\n const value = formatter(d[\"net_\" + eleClass]);\n return `${d.key}\nRelative ${character} from previous model: ${value}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"date_parser = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"num_cols = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"chart_width = (width - 50) / num_cols","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"chart_height = height / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"min_date = \"2020-03-01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"max_date = \"2020-07-01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"x = d3\n .scaleTime()\n .range([margin.left, chart_width - margin.right])\n .domain([date_parser(min_date), date_parser(max_date)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"// Get the maximum difference between the models\nmax_val = d3.max(by_location_diffs, d => {\n return d3.max(d.values, dd => Math.abs(dd.value.diff));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"y = d3\n .scaleLinear()\n .range([chart_height - margin.bottom, margin.top])\n .domain([-max_val, max_val])","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"x_column = i => chart_width * (i % num_cols)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"y_column = i => chart_height * Math.floor(i / num_cols)","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"// Function for drawing area\narea_function = (obj, direction = \"increase\") => {\n // Function that returns our path based on the data\n let area = d3\n .area()\n .x((d, i) => x(date_parser(d.key)))\n .y0(d => y(0))\n .y1(d => {\n if (d.value === undefined) return 0;\n if (direction == \"decrease\") {\n if (d.value.diff < 0) {\n return y(+d.value.diff);\n } else {\n return y(0);\n }\n } else {\n if (d.value.diff > 0) {\n return y(+d.value.diff);\n } else {\n return y(0);\n }\n }\n });\n return area(obj.values);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"formatter = d3.format(\".2s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`### Constants, styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"increase_color = '#FBB'","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"decrase_color = '#459cff'","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"margin = ({\n top: 20,\n right: 0,\n bottom: 30,\n left: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}