31:T9c5,goal = md`## The Goal The [Nexstrain app](https://nextstrain.org/ncov?dmax=2020-02-08&dmin=2020-01-21&p=grid) is a tool for epidemiology, the main visualization is a phylogenetic tree along side a world map: ${await FileAttachment("mapandtreeunfiltered.png").image()} A key feature of the app is the ability to filter down cases to a specific time range, which affects the visualizations like so: ${await FileAttachment("mapandtree.png").image()} As the Nextstrain team develops more [reports](https://nextstrain.org/narratives/ncov/sit-rep/2020-03-13?n=1) they find they are displaying the map without the tree, which leaves the reader without some important cues given by the tree. ${await FileAttachment("rangemap.png").image()} Notice that there is no legend at all, the colors, sizes and time range are all missing from a view like this. The goal of this notebook is to explore solutions to this. ### Idea - interactive histogram One idea is to compress the tree view's y-axis so that it can be displayed underneath the map without taking up too much real estate. This could be achieved with an interactive histogram that could indicate cases, binned by day on a timeline. It could both show the selected time range and allow the user to modify the timeline, like this histogram from Curran's [Mapping Migrant Deaths](https://bl.ocks.org/curran/a479b91bba14d633487e/f3f9dee15b297a781b00d1483efe84d114f40ad8): ${await FileAttachment("migranthisto.png").image()} The histogram could also be implemented as a [stacked bar chart](https://observablehq.com/@mbostock/revenue-by-music-format-1973-2018) to convey information about the colors of cases (indicating things like the location of the case): ${await FileAttachment("stackedhisto.png").image()} ### Idea - clade diagram This histogram approach would sacrifice phylogenetic information in favor of emphasizing the time and number of cases over time. Alternatively, a similar histogram could be developed showing the prevelance of different clades over time as seen in the [seasonal Flu nextstrain visualizations](https://nextstrain.org/flu/seasonal/h3n2/ha/2y): ${await FileAttachment("mullerplot.png").image()} ### Idea - simple date range Finally, a very simple time range slider could be extended across the bottom of the map, to minimize the y-axis real estate taken up. This is a screenshot from the sidebar of the app, the version we imagine would be more vertically compact. ${await FileAttachment("rangeslider.png").image()} `32:T41e,mocks = md`## Mocks [Kent Eisenhuth](https://twitter.com/KentTheHuth) has put together a couple of wireframe mocks proposing some design directions. These are concepts for a collapsible timeline that includes a legend and can provide additional context for the map. This timeline uses annotations to highlight starting dates for each clade. ![mocks 1](https://user-images.githubusercontent.com/1275956/77001434-56925a00-6930-11ea-90c7-ac3c888f3417.png) This second wireframe features explorations of how to surface some of the data present in the expanded timeline. ![mocks 2](https://user-images.githubusercontent.com/1275956/77001455-601bc200-6930-11ea-8e40-997e7542fa61.png) This mock is an improvement of the tooltip design, giving it more structure and suggesting that a single bar in the stacked barchart gets highlighted. ${await FileAttachment("nextstrain-4.png").image()} While this mock looks closer at how we might collapse the introduction annotations if there are too many on one day. ${await FileAttachment("nextstrain-5.png").image()} `33:T8b9, groupedLegend = { let div = html`

` let orderedRegions = [ "Asia", "Europe", "Oceania", "Africa", "South America", "North America" ] let items = [] orderedRegions.forEach(d => { let keys = Array.from(divisionsByRegion.get(d).keys()) .sort((a,b) => { return divisionColors(a).index - divisionColors(b).index }) items.push({ label: d, // color: divisionColors[keys[0]].color, type: "region", items: keys.map(k => { return { label: k, color: divisionColors(k).color, type: "item" } }) }) }) let divs = d3.select(div).select(".glegend").selectAll("div.region") .data(items) .join( enter => { let dd = enter.append("div").classed("region", true) let ritem = dd.append("div").classed("header", true) ritem.append("span").classed("box", true) .style("background-color", d => d.color) ritem.append("span").classed("text", true) .text(d => d.label) dd.selectAll("div.item") .data((d) => d.items) .join( enter2 => { let dd = enter2.append("div").classed("item", true) dd.append("span").classed("box", true) .style("background-color", d => d.color) dd.append("span").classed("text", true) .text(d => d.label) } ) } ) .classed("item", true) return div }34:T8b3,countryGroupedLegend = { let div = html`

` let orderedRegions = [ "Asia", "Oceania", "Europe", "Africa", "South America", "North America" ] let items = [] orderedRegions.forEach(d => { let keys = Array.from(countryByRegion.get(d).keys()) .sort((a,b) => { return countryColors(a).index - countryColors(b).index }) items.push({ label: d, color: countryColors(keys[0]).color, type: "region", items: keys.map(k => { return { label: k, color: countryColors(k).color, type: "item" } }) }) }) let divs = d3.select(div).select(".cglegend").selectAll("div.region") .data(items) .join( enter => { let dd = enter.append("div").classed("region", true) let ritem = dd.append("div").classed("header", true) ritem.append("span").classed("box", true) .style("background-color", d => d.color) ritem.append("span").classed("text", true) .text(d => d.label) dd.selectAll("div.item") .data((d) => d.items) .join( enter2 => { let dd = enter2.append("div").classed("item", true) dd.append("span").classed("box", true) .style("background-color", d => d.color) dd.append("span").classed("text", true) .text(d => d.label) } ) } ) .classed("item", true) return div }35:T141c,simpleHisto = function(data, height) { let div = html` ` const tooltip = d3.select(div).select(".tooltip") // const svg = d3.create("svg") const svg = d3.select(div).select("svg") .attr("viewBox", [0, 0, width, height]); /* Setup interactive rectangles in the background to trigger highlight and tooltip */ svg.append("g") .selectAll("rect.bg") .data(dateRange) .join("rect") .classed("bg", true) .attr("x", d => x(d)) .attr("y", d => margin.top) .attr("width", x.bandwidth() ) .attr("height", d => height - margin.bottom) .style("fill", "#fff") .on("mouseover", function(d) { d3.select(this).style("fill", "#dfdfdf") tooltip.style("left", d3.mouse(this)[0] - 45 + "px") // grab all of the points for this day let points = data.filter(dd => dd[0] == d) if(!points.length) points = [ [d, 0] ] tooltip.style("display", "flex") let items = tooltip.selectAll("div.item") .data(points) .join( enter => { let dd = enter.append("div").classed("item", true) // dd.append("span").classed("box", true) // .style("background-color", d => d[1]) dd.append("span").classed("text", true) .html(d => d[0] + "
" + d[1] + " samples") }, update => { // update.select("span.box") // .style("background-color", d => d[1]) update.select("span.text") .html(d => d[0] + "
" + d[1] + " samples") }, exit => { exit.remove() } ) let bbox = tooltip.node().getBoundingClientRect() tooltip.style("top", -bbox.height + "px") }) .on("mouseout", function(d) { d3.select(this).style("fill", "#fff") tooltip.style("display", "none") }) svg.append("g") .selectAll("rect.bar") .data(data) .join("rect") .classed("bar", true) .attr("x", d => x(d[0])) .attr("y", d => y(d[1])) .attr("width", x.bandwidth() ) .attr("height", d => height - y(d[1]) - margin.bottom) .style("fill", "#757575") .style("pointer-events", "none") /* Axis and grid lines */ svg.append("g") .attr("transform", `translate(${+x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(dateRange, height, margin, "#dfdfdf")); svg.append("g") .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(xTicks, height, margin, "#999")); svg.append("g") .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxis); svg.append("line") .attr("x1", x(start_date)) .attr("x2", x(end_date) + x.bandwidth()) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .style("stroke", "#dfdfdf") /* The rectangles that cover the out-of-range days */ svg.append("rect") .attr("x", x(start_date)) .attr("width", x(numericToCalendar(range[0])) - x(start_date)) .attr("y", margin.top) .attr("height", height - margin.bottom - margin.top) .style("fill", "#efefef") .style("fill-opacity", 0.7) .style("pointer-events", "none") let xEnd = x(numericToCalendar(range[1])) svg.append("rect") .attr("width", x(end_date) - xEnd) .attr("x", xEnd + x.bandwidth()) .attr("y", margin.top) .attr("height", height - margin.bottom - margin.top) .style("fill", "#efefef") .style("fill-opacity", 0.7) .style("pointer-events", "none") // render a line at each end of the visible area let x1 = x(numericToCalendar(range[0])) let x2 = x(numericToCalendar(range[1])) + x.bandwidth() svg.append("line") .attr("x1", x1) .attr("x2", x1) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("stroke", "#111") svg.append("line") .attr("x1", x2) .attr("x2", x2) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("stroke", "#111") // render a rectangle bounding the visible area // svg.append("rect") // .attr("width", x2 - x1) // .attr("x", x1 + x.bandwidth()) // .attr("y", margin.bottom) // .attr("height", height - margin.bottom - margin.top) // .style("fill", "none") // .style("stroke", "#111") // .style("fill-opacity", 0.7) // } // svg.append("g") // .call(yAxis); // div.node().appendChild(svg.node()) return div; }36:T518,// gives us an array with one row for each division, each of those rows is an array of 85 dates pivotSeries = function(pivot, stackOrder) { let keys = pivotKeys(pivot) let pivotedNodes = pivotNodes(pivot) // create an intermediate datastructure that we can pass into d3.stack let entries = Array.from(pivotedNodes) .sort((a,b) => a[0].localeCompare(b[0])) // order by date ascending .map(d => ({ date: d[0], map: d[1] })) // store each element as an object instead of array let stacked = d3.stack() .keys(keys) .value((group, key) => { return group.map.get(key) }) if(stackOrder) { stacked = stacked.offset(stackOrder) } stacked = stacked(entries) // post-processing the stack so that each datapoint (what will become a rectangle or a piece of the stream) // has all it's associated metadata in the .data property, // this way we don't need to look it up by index later // I wonder if there is a way to do this with d3.stack keys.forEach((key,i) => { let stack = stacked[i]; stack.forEach(s => { let d = s.data s.data = { date: d.date, key: key, group: regionsBy[pivot].get(key), value: d.map.get(key), color: colorScales[pivot](key) } }) }) return stacked }37:Tcc2,stackedHisto = function(data, height) { let div = html`

` let className = "sh_tooltip" let tooltipDiv = makeTooltip(className) div.appendChild(tooltipDiv) const tooltip = d3.select(tooltipDiv).select("." + className) // let points = pointsByDate(data) // const svg = d3.create("svg") const svg = d3.select(div).select("svg") .attr("viewBox", [0, 0, width, height]); /* Setup interactive rectangles in the background to trigger highlight and tooltip */ svg.append("g") .selectAll("rect.bg") .data(dateRange) .join("rect") .classed("bg", true) .attr("x", d => x(d)) .attr("y", d => margin.top) .attr("width", x.bandwidth() ) .attr("height", d => height - margin.bottom) .style("fill", "#fff") .on("mouseover", function(d) { d3.select(this).style("fill", "#dfdfdf") tooltipDiv.update(this, d, data) // tooltipDiv.update(this, d, points[d].points, points[d].total) }) .on("mouseout", function(d) { d3.select(this).style("fill", "#fff") let ee = d3.event.toElement console.log(tooltip.node().contains(ee)) // TODO: simplify this and move it to tooltip if(!tooltip.node().contains(ee) && //ee != tooltip.node() && !d3.select(ee).classed("bg")) { tooltip.style("display", "none") } }) let ys = d3.scaleLinear() .domain([0, d3.max(data, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom, margin.top]) svg.append("g") .selectAll("g") .data(data) .join("g") .attr("fill", (d) => { return d[0].data.color.color }) .style("pointer-events", "none") .call((g,div) => { return g.selectAll("rect") .data(d => { return d}) .join("rect") .attr("x", (d) => { return x(d.data.date) }) .attr("y", (d,i) => ys(d[1])) .attr("width", x.bandwidth()) .attr("height", (d,i) => {return ys(d[0]) - ys(d[1])}) }); /* Axis and grid lines */ svg.append("g").classed("axis", true) .attr("transform", `translate(${+x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(dateRange, height, margin, "#dfdfdf")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(xTicks, height, margin, "#999")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxis); svg.append("line").classed("axis", true) .attr("x1", x(start_date)) .attr("x2", x(end_date) + x.bandwidth()) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .style("stroke", "#dfdfdf") svg.append("line").classed("axis", true) .attr("x1", x(start_date)) .attr("x2", x(end_date) + x.bandwidth()) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .style("stroke", "#dfdfdf") // svg.append("g") // .call(yAxis); // return svg.node(); return div }38:Tae9,streamedHisto = function(data, height) { let div = html`

` let className = "srh_tooltip" let tooltipDiv = makeTooltip(className) div.appendChild(tooltipDiv) const tooltip = d3.select(tooltipDiv).select("." + className) // const svg = d3.create("svg") const svg = d3.select(div).select("svg") .attr("viewBox", [0, 0, width, height]); /* Setup interactive rectangles in the background to trigger highlight and tooltip */ svg.append("g") .selectAll("rect.bg") .data(dateRange) .join("rect") .classed("bg", true) .attr("x", d => x(d)) .attr("y", d => margin.top) .attr("width", x.bandwidth() ) .attr("height", d => height - margin.bottom) .style("fill", "#fff") .on("mouseover", function(d) { d3.select(this).style("fill", "#dfdfdf") tooltipDiv.update(this, d, data) }) .on("mouseout", function(d) { d3.select(this).style("fill", "#fff") if(d3.event.toElement != tooltip.node() && !d3.select(d3.event.toElement).classed("bg")) { tooltip.style("display", "none") } }) let ys = d3.scaleLinear() .domain([d3.min(data, d => d3.min(d, d => d[0])), d3.max(data, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom, margin.top]) svg.append("g") .selectAll("g") .data(data) .join("g") .attr("fill", (d) => { return d[0].data.color.color }) .style("pointer-events", "none") .call((g,div) => { return g.selectAll("rect") .data(d => {return d}) .join("rect") .attr("x", (d) => { return x(d.data.date) }) .attr("y", (d,i) => ys(d[1])) .attr("width", x.bandwidth() - 1) .attr("height", (d,i) => {return ys(d[0]) - ys(d[1])}) }); /* Axis and grid lines */ svg.append("g").classed("axis", true) .attr("transform", `translate(${+x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(dateRange, height, margin, "#dfdfdf")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(xTicks, height, margin, "#999")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxis); svg.append("line").classed("axis", true) .attr("x1", x(start_date)) .attr("x2", x(end_date) + x.bandwidth()) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .style("stroke", "#dfdfdf") // svg.append("g") // .call(yAxis); // return svg.node(); return div }39:T9c6,streamGraph = function(data, height) { let div = html`

` let className = "sg_tooltip" let tooltipDiv = makeTooltip(className) div.appendChild(tooltipDiv) const tooltip = d3.select(tooltipDiv).select("." + className) const svg = d3.select(div).select("svg") .attr("viewBox", [0, 0, width, height]); /* Setup interactive rectangles in the background to trigger highlight and tooltip */ svg.append("g") .selectAll("rect.bg") .data(dateRange) .join("rect") .classed("bg", true) .attr("x", d => x(d)) .attr("y", d => margin.top) .attr("width", x.bandwidth() ) .attr("height", d => height - margin.bottom) .style("fill", "#fff") .on("mouseover", function(d) { d3.select(this).style("fill", "#dfdfdf") tooltipDiv.update(this, d, data) }) .on("mouseout", function(d) { d3.select(this).style("fill", "#fff") if(d3.event.toElement != tooltip.node() && !d3.select(d3.event.toElement).classed("bg")) { tooltip.style("display", "none") } }) let ys = d3.scaleLinear() .domain([d3.min(data, d => d3.min(d, d => d[0])), d3.max(data, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom, margin.top]) let area = d3.area() .x((d,i) => x(dateRange[i])) .y0(d => ys(d[0])) .y1(d => ys(d[1])) .curve(d3.curveCardinal) /* Axis and grid lines */ svg.append("g").classed("axis", true) .attr("transform", `translate(${+x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(dateRange, height, margin, "#dfdfdf")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxisLines(xTicks, height, margin, "#999")); svg.append("g").classed("axis", true) .attr("transform", `translate(${-x.bandwidth()/2 - .5},${height - margin.bottom})`) .call(xAxis); svg.append("line").classed("axis", true) .attr("x1", x(start_date)) .attr("x2", x(end_date) + x.bandwidth()) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .style("stroke", "#dfdfdf") svg.append("g") .selectAll("path") .data(data) .join("path") .style("pointer-events", "none") .attr("fill", (d) => { return d[0].data.color.color }) .attr("d", area) return div }3a:T81f,function tooltipCSS(className) { return `.${className} { position: absolute; top: -20px; max-width: ${tooltipWidth}px; width: ${tooltipWidth}px; display:flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; background: #fff; border-radius: 5px; border: 1px solid #afafaf; font-family: Lato, "Helvetica Neue", Helvetica, sans-serif; } .${className} .heading { pointer-events: none; display: flex; flex-direction: row; justify-content: space-between; width: 100%; border-bottom: 1px solid #afafaf; } .${className} .heading .date { max-width: ${tooltipWidth/2}px; padding: 5px; } .${className} .heading .total { padding: 5px; text-align: right; font-weight: bold; } .${className} .content { padding: 5px; width: 100%; height: ${tooltipHeight}px; max-height: ${tooltipHeight}px; overflow-y: scroll; overflow-x: hidden; } .${className} .content .item:nth-child(even) { background: #fafafa; } .${className} .item { padding: 5px; display: flex; flex-direction: row; justify-content: space-between; height: 16px; } .${className} .region { padding: 5px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap:wrap; width: 100%; max-width: 100%; } .${className} .region .regionKey { /* width: 150px; */ text-decoration: underline; min-width: 150px; line-height: 20px; } .${className} .region .regionValue { padding-right: 10px; } .${className} .break { flex-basis: 100%; height: 0; } .${className} .item .key { display: flex; flex-direction: row; width: 200px; min-width: 200px; } .${className} .item .box { display: block; width: 12px; height: 12px; } .${className} .item .text { font-size: 14px; line-height: 14px; padding-left: 4px; } .${className} .item .value { width: 16px; padding-right: 6px; line-height: 16px; font-size: 14px; text-align: right; } .${className} .item .bar_bg { width: 60px; height: 24px; } .${className} .item .bar { height: 14px; margin: 1px; background-color: gray; }` }3b:Tea2,function makeTooltip(className) { // set up the dom & styles let div = html` ` let tooltip = d3.select(div).select(`.${className}`) tooltip.on("mouseout", function() { let ee = d3.event.toElement if(!tooltip.node().contains(ee)) { tooltip.style("display", "none") } }) // this is to be called by the mouseover triggered by the day div.update = function(node, date, data) { tooltip.style("display", "flex") if(node) { let x = d3.mouse(node)[0] - tooltipWidth/2 let w = width - margin.left - margin.right if(x + tooltipWidth > w) x = x - ((x + tooltipWidth) - w) if(x < margin.left) x = margin.left console.log("x", x + tooltipWidth / 2, "difference", x + tooltipWidth/2 - w) tooltip.style("left", x + "px") } tooltip.select(".heading .date").text(date) // grab all the data points that have a value for this date // TODO: computing this every tooltip may be slower than necessary // but it's the DOM operations below that really slow this down (with more elements) let points = [] let total = 0 data.forEach(series => { series.forEach(d => { if(d.data.date == date && d.data.value > 0) { points.push(d.data) total += d.data.value } }) }) let regions = Array.from(d3.rollup(points, v => v, d => d.group)) console.log("regions", regions) // regions.sort((a,b) => { // return d3.sum(b[1], d => d.value) - d3.sum(a[1], d => d.value) // }) // console.log(points) tooltip.select(".heading .total").text(total + " samples") let tx = d3.scaleLinear() .domain([0, d3.max(points, d => d.value)]) .range([0, 60]) // We want to group the points into their constituent regions let rs = tooltip.select(".content").selectAll("div.region") .data(regions, d => d[0]) rs.exit().remove() let rsE = rs.enter().append("div").classed("region", true) rsE.append("div").classed("regionKey", true) .text(d => d[0]) rsE.append("span").classed("regionValue", true) rsE.append("div").classed("break", true) rsE.append("div").classed("items", true) rs = rs.merge(rsE) rs.select("span.regionValue").text(d => d3.sum(d[1], i => i.value) + " samples") rs.sort((a,b) => d3.sum(b[1], i => i.value) - d3.sum(a[1], i => i.value)) let items = rs.select(".items").selectAll("div.item") // .data(points, d => d.key) .data(d => d[1]) items.exit().remove() let itemsE = items.enter().append("div").classed("item", true) let key = itemsE.append("div").classed("key", true) key.append("span").classed("box", true) key.append("span").classed("text", true) let value = itemsE.append("span").classed("value", true) let bar_bg = itemsE.append("div").classed("bar_bg", true) let bar = bar_bg.append("div").classed("bar", true) items = items.merge(itemsE) items.select(".box").style("background-color", d => d.color.color) items.select(".text").html(d => d.key) items.select(".value").html(d => "" + d.value + "") items.select(".bar").style("width", d => tx(d.value) + "px") items.sort((a,b) => b.value - a.value) let bbox = tooltip.node().getBoundingClientRect() tooltip.style("top", -bbox.height + "px") } // return the view return div }3c:T1d3f,colors = [ [], ["#4C90C0"], ["#4C90C0", "#CBB742"], ["#4988C5", "#7EB876", "#CBB742"], ["#4580CA", "#6BB28D", "#AABD52", "#DFA43B"], ["#4377CD", "#61AB9D", "#94BD61", "#CDB642", "#E68133"], ["#416DCE", "#59A3AA", "#84BA6F", "#BBBC49", "#E29D39", "#E1502A"], ["#3F63CF", "#529AB6", "#75B681", "#A6BE55", "#D4B13F", "#E68133", "#DC2F24"], ["#3E58CF", "#4B8EC1", "#65AE96", "#8CBB69", "#B8BC4A", "#DCAB3C", "#E67932", "#DC2F24"], ["#3F4DCB", "#4681C9", "#5AA4A8", "#78B67E", "#9EBE5A", "#C5B945", "#E0A23A", "#E67231", "#DC2F24"], ["#4042C7", "#4274CE", "#5199B7", "#69B091", "#88BB6C", "#ADBD51", "#CEB541", "#E39B39", "#E56C2F", "#DC2F24"], ["#4137C2", "#4066CF", "#4B8DC2", "#5DA8A3", "#77B67F", "#96BD60", "#B8BC4B", "#D4B13F", "#E59638", "#E4672F", "#DC2F24"], ["#462EB9", "#3E58CF", "#4580CA", "#549DB2", "#69B091", "#83BA70", "#A2BE57", "#C1BA47", "#D9AD3D", "#E69136", "#E4632E", "#DC2F24"], ["#4B26B1", "#3F4ACA", "#4272CE", "#4D92BF", "#5DA8A3", "#74B583", "#8EBC66", "#ACBD51", "#C8B944", "#DDA93C", "#E68B35", "#E3602D", "#DC2F24"], ["#511EA8", "#403DC5", "#4063CF", "#4785C7", "#559EB1", "#67AF94", "#7EB877", "#98BD5E", "#B4BD4C", "#CDB642", "#DFA53B", "#E68735", "#E35D2D", "#DC2F24"], ["#511EA8", "#403AC4", "#3F5ED0", "#457FCB", "#5098B9", "#60AA9F", "#73B583", "#8BBB6A", "#A4BE56", "#BDBB48", "#D3B240", "#E19F3A", "#E68234", "#E25A2C", "#DC2F24"], ["#511EA8", "#4138C3", "#3E59CF", "#4379CD", "#4D92BE", "#5AA5A8", "#6BB18E", "#7FB975", "#96BD5F", "#AFBD4F", "#C5B945", "#D8AE3E", "#E39B39", "#E67D33", "#E2572B", "#DC2F24"], ["#511EA8", "#4236C1", "#3F55CE", "#4273CE", "#4A8CC2", "#569FAF", "#64AD98", "#76B680", "#8BBB6A", "#A1BE58", "#B7BC4B", "#CCB742", "#DCAB3C", "#E59638", "#E67932", "#E1552B", "#DC2F24"], ["#511EA8", "#4335BF", "#3F51CC", "#416ECE", "#4887C6", "#529BB6", "#5FA9A0", "#6EB389", "#81B973", "#95BD61", "#AABD52", "#BFBB48", "#D1B340", "#DEA63B", "#E69237", "#E67531", "#E1522A", "#DC2F24"], ["#511EA8", "#4333BE", "#3F4ECB", "#4169CF", "#4682C9", "#4F96BB", "#5AA5A8", "#68AF92", "#78B77D", "#8BBB6A", "#9EBE59", "#B3BD4D", "#C5B945", "#D5B03F", "#E0A23A", "#E68D36", "#E67231", "#E1502A", "#DC2F24"], ["#511EA8", "#4432BD", "#3F4BCA", "#4065CF", "#447ECC", "#4C91BF", "#56A0AE", "#63AC9A", "#71B486", "#81BA72", "#94BD62", "#A7BE54", "#BABC4A", "#CBB742", "#D9AE3E", "#E29E39", "#E68935", "#E56E30", "#E14F2A", "#DC2F24"], ["#511EA8", "#4531BC", "#3F48C9", "#3F61D0", "#4379CD", "#4A8CC2", "#539CB4", "#5EA9A2", "#6BB18E", "#7AB77B", "#8BBB6A", "#9CBE5B", "#AFBD4F", "#C0BA47", "#CFB541", "#DCAB3C", "#E39B39", "#E68534", "#E56B2F", "#E04D29", "#DC2F24"], ["#511EA8", "#4530BB", "#3F46C8", "#3F5ED0", "#4375CD", "#4988C5", "#5098B9", "#5AA5A8", "#66AE95", "#73B583", "#82BA71", "#93BC62", "#A4BE56", "#B5BD4C", "#C5B945", "#D3B240", "#DEA73B", "#E59738", "#E68234", "#E4682F", "#E04C29", "#DC2F24"], ["#511EA8", "#462FBA", "#3F44C8", "#3E5BD0", "#4270CE", "#4784C8", "#4E95BD", "#57A1AD", "#61AB9C", "#6DB38A", "#7BB879", "#8BBB6A", "#9BBE5C", "#ABBD51", "#BBBC49", "#CBB843", "#D6AF3E", "#DFA43B", "#E69537", "#E67F33", "#E4662E", "#E04A29", "#DC2F24"], ["#511EA8", "#462EB9", "#4042C7", "#3E58CF", "#416DCE", "#4580CA", "#4C90C0", "#549DB2", "#5DA8A3", "#69B091", "#75B681", "#83BA70", "#92BC63", "#A2BE57", "#B2BD4D", "#C1BA47", "#CEB541", "#D9AD3D", "#E1A03A", "#E69136", "#E67C32", "#E4632E", "#E04929", "#DC2F24"], ["#511EA8", "#462EB9", "#4040C6", "#3F55CE", "#4169CF", "#447DCC", "#4A8CC2", "#529AB7", "#5AA5A8", "#64AD98", "#70B487", "#7DB878", "#8BBB6A", "#99BD5D", "#A9BD53", "#B7BC4B", "#C5B945", "#D1B340", "#DCAB3C", "#E29D39", "#E68D36", "#E67932", "#E3612D", "#E04828", "#DC2F24"], ["#511EA8", "#472DB8", "#403EC6", "#3F53CD", "#4066CF", "#4379CD", "#4989C5", "#4F97BB", "#57A1AD", "#61AA9E", "#6BB18E", "#77B67F", "#84BA70", "#92BC64", "#A0BE58", "#AFBD4F", "#BCBB49", "#CAB843", "#D4B13F", "#DEA83C", "#E39B39", "#E68A35", "#E67732", "#E35F2D", "#DF4728", "#DC2F24"], ["#511EA8", "#472CB7", "#403DC5", "#3F50CC", "#4063CF", "#4375CD", "#4785C7", "#4D93BE", "#559EB1", "#5DA8A3", "#67AF94", "#72B485", "#7EB877", "#8BBB6A", "#98BD5E", "#A6BE55", "#B4BD4C", "#C1BA47", "#CDB642", "#D7AF3E", "#DFA53B", "#E49838", "#E68735", "#E67431", "#E35D2D", "#DF4628", "#DC2F24"], ["#511EA8", "#482CB7", "#403BC5", "#3F4ECB", "#3F61D0", "#4272CE", "#4682C9", "#4C90C0", "#529BB5", "#5AA5A8", "#63AC9A", "#6DB28B", "#78B77D", "#84BA6F", "#91BC64", "#9EBE59", "#ACBD51", "#B9BC4A", "#C5B945", "#D0B441", "#DAAD3D", "#E0A23A", "#E59637", "#E68434", "#E67231", "#E35C2C", "#DF4528", "#DC2F24"], ["#511EA8", "#482BB6", "#403AC4", "#3F4CCB", "#3F5ED0", "#426FCE", "#457FCB", "#4A8CC2", "#5098B9", "#58A2AC", "#60AA9F", "#69B091", "#73B583", "#7FB976", "#8BBB6A", "#97BD5F", "#A4BE56", "#B1BD4E", "#BDBB48", "#C9B843", "#D3B240", "#DCAB3C", "#E19F3A", "#E69337", "#E68234", "#E67030", "#E25A2C", "#DF4428", "#DC2F24"], ["#511EA8", "#482BB6", "#4039C3", "#3F4ACA", "#3E5CD0", "#416CCE", "#447CCD", "#4989C4", "#4E96BC", "#559FB0", "#5DA8A4", "#66AE96", "#6FB388", "#7AB77C", "#85BA6F", "#91BC64", "#9DBE5A", "#AABD53", "#B6BD4B", "#C2BA46", "#CDB642", "#D6B03F", "#DDA83C", "#E29D39", "#E69036", "#E67F33", "#E56D30", "#E2592C", "#DF4428", "#DC2F24"], ["#511EA8", "#482AB5", "#4138C3", "#3F48C9", "#3E59CF", "#4169CF", "#4379CD", "#4886C6", "#4D92BE", "#539CB4", "#5AA5A8", "#62AB9B", "#6BB18E", "#75B581", "#7FB975", "#8BBB6A", "#96BD5F", "#A2BE57", "#AFBD4F", "#BABC4A", "#C5B945", "#CFB541", "#D8AE3E", "#DFA63B", "#E39B39", "#E68D36", "#E67D33", "#E56B2F", "#E2572B", "#DF4328", "#DC2F24"], ["#511EA8", "#492AB5", "#4137C2", "#3F47C9", "#3E57CE", "#4067CF", "#4376CD", "#4783C8", "#4C8FC0", "#519AB7", "#58A2AC", "#5FA9A0", "#68AF93", "#70B486", "#7BB77A", "#85BA6F", "#90BC65", "#9CBE5B", "#A8BE54", "#B3BD4D", "#BEBB48", "#C9B843", "#D2B340", "#DAAD3D", "#E0A33B", "#E49838", "#E68B35", "#E67B32", "#E5692F", "#E2562B", "#DF4227", "#DC2F24"], ["#511EA8", "#492AB5", "#4236C1", "#3F45C8", "#3F55CE", "#4064CF", "#4273CE", "#4681CA", "#4A8CC2", "#4F97BA", "#569FAF", "#5CA7A4", "#64AD98", "#6DB28B", "#76B680", "#80B974", "#8BBB6A", "#96BD60", "#A1BE58", "#ACBD51", "#B7BC4B", "#C2BA46", "#CCB742", "#D4B13F", "#DCAB3C", "#E1A13A", "#E59638", "#E68835", "#E67932", "#E4672F", "#E1552B", "#DF4227", "#DC2F24"], ["#511EA8", "#4929B4", "#4235C0", "#3F44C8", "#3F53CD", "#3F62CF", "#4270CE", "#457ECB", "#4989C4", "#4E95BD", "#549DB3", "#5AA5A8", "#61AB9C", "#69B090", "#72B485", "#7BB879", "#85BA6E", "#90BC65", "#9BBE5C", "#A6BE55", "#B1BD4E", "#BBBC49", "#C5B945", "#CEB541", "#D6AF3E", "#DDA93C", "#E29F39", "#E69537", "#E68634", "#E67732", "#E4662E", "#E1532B", "#DF4127", "#DC2F24"], ["#511EA8", "#4929B4", "#4335BF", "#3F42C7", "#3F51CC", "#3F60D0", "#416ECE", "#447CCD", "#4887C6", "#4D92BF", "#529BB6", "#58A2AB", "#5FA9A0", "#66AE95", "#6EB389", "#77B67E", "#81B973", "#8BBB6A", "#95BD61", "#A0BE59", "#AABD52", "#B5BD4C", "#BFBB48", "#C9B843", "#D1B340", "#D8AE3E", "#DEA63B", "#E29C39", "#E69237", "#E68434", "#E67531", "#E4642E", "#E1522A", "#DF4127", "#DC2F24"], ["#511EA8", "#4928B4", "#4334BF", "#4041C7", "#3F50CC", "#3F5ED0", "#416CCE", "#4379CD", "#4784C7", "#4B8FC1", "#5098B9", "#56A0AF", "#5CA7A4", "#63AC99", "#6BB18E", "#73B583", "#7CB878", "#86BB6E", "#90BC65", "#9ABD5C", "#A4BE56", "#AFBD4F", "#B9BC4A", "#C2BA46", "#CCB742", "#D3B240", "#DAAC3D", "#DFA43B", "#E39B39", "#E68F36", "#E68234", "#E67431", "#E4632E", "#E1512A", "#DF4027", "#DC2F24"] ]3d:[{"id":"9887815fa5eca7072d53675e3de5eafaf13ce4ea8aef409acb65ff046d513fc41186be0361e901343e933ff342da69f216b001019c45d312e60689851ecdfe26","href":"https://static.observableusercontent.com/files/9887815fa5eca7072d53675e3de5eafaf13ce4ea8aef409acb65ff046d513fc41186be0361e901343e933ff342da69f216b001019c45d312e60689851ecdfe26","name":"mapandtreeunfiltered.png","type":"image/png","lastModified":1584141534664.82,"size":752219},{"id":"d93b21bde6881f2f8dea870c89376262fdba41b7800793d96d0f07af200ced209a657cf9b2c41759db7f60895ffb4bf4e927c5d8e11385efedef9979eebcdfb7","href":"https://static.observableusercontent.com/files/d93b21bde6881f2f8dea870c89376262fdba41b7800793d96d0f07af200ced209a657cf9b2c41759db7f60895ffb4bf4e927c5d8e11385efedef9979eebcdfb7","name":"mullerplot.png","type":"image/png","lastModified":1584161775764.041,"size":153701},{"id":"6ae9e10aacc9babb8dd84589ee1eedccea42b5a5ca1b873d64ab703ca5db96f752cbc58b7ad84c7a2596805a700754caceaff93ec888a17847e93dc6ebbf444e","href":"https://static.observableusercontent.com/files/6ae9e10aacc9babb8dd84589ee1eedccea42b5a5ca1b873d64ab703ca5db96f752cbc58b7ad84c7a2596805a700754caceaff93ec888a17847e93dc6ebbf444e","name":"rangeslider.png","type":"image/png","lastModified":1584140726836.793,"size":14167},{"id":"e56053eb9b083cef1929d5607ed0477b05fd0f3786f031d9bd8a2711b14eccd9a9a13e3fe4684934f3c5a1a65621087d92a954ae4acfb8227a89913111596117","href":"https://static.observableusercontent.com/files/e56053eb9b083cef1929d5607ed0477b05fd0f3786f031d9bd8a2711b14eccd9a9a13e3fe4684934f3c5a1a65621087d92a954ae4acfb8227a89913111596117","name":"rangemap.png","type":"image/png","lastModified":1584140728626.373,"size":1414863},{"id":"401ad3b5f53050422d02bfb1daeeb1cc9c0e74029e58cddc0c4381a66a4cc5de7a3c72dee1b4230be02480812d25b6c8d654eef7a91e38e97fa37f8dd2961f51","href":"https://static.observableusercontent.com/files/401ad3b5f53050422d02bfb1daeeb1cc9c0e74029e58cddc0c4381a66a4cc5de7a3c72dee1b4230be02480812d25b6c8d654eef7a91e38e97fa37f8dd2961f51","name":"mapandtree.png","type":"image/png","lastModified":1584141201687.464,"size":849785},{"id":"f0b2c16ac6824d39cc71353fb67fb7c2c10734a7716f6cd2182b6b8a396d1432ce0a627ee18333f998c44d052887030f8ef47105acf57b414088c530035c4d2d","href":"https://static.observableusercontent.com/files/f0b2c16ac6824d39cc71353fb67fb7c2c10734a7716f6cd2182b6b8a396d1432ce0a627ee18333f998c44d052887030f8ef47105acf57b414088c530035c4d2d","name":"migranthisto.png","type":"image/png","lastModified":1584142857835.115,"size":51206},{"id":"6b241fe7e747e94099f94b74947d6c0bc27c9ba391973cd843373600c039b5d7b1da7f0cbdd974f0057ec9f343c171b49cc0fb70a0f2910a590c6bc3f5a05ba3","href":"https://static.observableusercontent.com/files/6b241fe7e747e94099f94b74947d6c0bc27c9ba391973cd843373600c039b5d7b1da7f0cbdd974f0057ec9f343c171b49cc0fb70a0f2910a590c6bc3f5a05ba3","name":"stackedhisto.png","type":"image/png","lastModified":1584142861192.534,"size":55127},{"id":"d097f113d74da2292f41548e19a6d762045be5a903a77f53e5e06ea385fb9f5f3c868b18b5bb447d4a7e0e05c33fc54976b5656cebf1dc1f5efc8328dff27eea","href":"https://static.observableusercontent.com/files/d097f113d74da2292f41548e19a6d762045be5a903a77f53e5e06ea385fb9f5f3c868b18b5bb447d4a7e0e05c33fc54976b5656cebf1dc1f5efc8328dff27eea","name":"nextstrain-4.png","type":"image/png","lastModified":1585799816583.407,"size":392242},{"id":"3b6080377c3779190f7d1fbd51582557643219b02157a91f86fe39806a5fab1f5941e04c4b93631e27e6d73a7665f9b6858af6efef4976d257e6b2b6f09db2f2","href":"https://static.observableusercontent.com/files/3b6080377c3779190f7d1fbd51582557643219b02157a91f86fe39806a5fab1f5941e04c4b93631e27e6d73a7665f9b6858af6efef4976d257e6b2b6f09db2f2","name":"nextstrain-5.png","type":"image/png","lastModified":1585801869369.55,"size":136519},{"id":"78b6d0edd49f14a456ee307d234cb9a9045e2b17daab0b91092b10d52f247b3303672225de7661f464cbc5850f126c2ac8ce80a632b42b60424ddfc8abec980c","href":"https://static.observableusercontent.com/files/78b6d0edd49f14a456ee307d234cb9a9045e2b17daab0b91092b10d52f247b3303672225de7661f464cbc5850f126c2ac8ce80a632b42b60424ddfc8abec980c","name":"ncov.global.small.json","type":"application/json","lastModified":1591325156840.168,"size":6255960}] 2f:{"title":"Nextstrain Prototyping - Issue 817","cells":[{"id":0,"value":"md`# Nextstrain Prototyping - Issue [817](https://github.com/nextstrain/auspice/issues/817)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`Attempting to help the [Auspice](https://github.com/nextstrain/auspice) project with some prototypes of feature requests. Motivated by the incredible impact [Nextstrain](https://nextstrain.org) has had on the COVID19 response, hopefully this notebook can help others with improving the Nexstrain visualizations!\n\nThis notebook is focused on issue [817](https://github.com/nextstrain/auspice/issues/817) - Showing a time-based legend when only map is displayed.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"md`## Table of Contents\n\n* [The Goal](#goal)\n* [Mocks](#mocks)\n* [Data](#data)\n* [Simple Legend](#simplelegend)\n* [Grouped Legend](#groupedlegend)\n* [Simple Histogram](#simplehistogram)\n* [Stacked Histogram](#stackedhistogram)\n* [Tooltip](#tooltip)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"thedata = md`## The Data\nWe can download the tree data that drives the entire [nextstrain.org](https://nextstrain.org) app directly as JSON: https://data.nextstrain.org/ncov.json\n\nYou can replace ncov with any of the other diseases in the list on the left hand side of the app.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"fonts = html`Load fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"// we read the data from a file attached to this notebook since the live URL seems to have moved\n// replacing \ndata = FileAttachment(\"ncov.global.small.json\").json() \n//data = d3.json(\"https://nextstrain.org/charon/getDataset?prefix=/ncov/global?\" + new Date().getDate())\n//data = d3.json(\"https://data.nextstrain.org/ncov.json?\" + new Date().getDate())","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`Using d3.hierarchy to parse the tree out of the JSON and process it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"root = d3.hierarchy(data.tree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`We can get a list of cases by going through all of the nodes and removing anything without an author in the name (these are presumed to be intermediate nodes for branching the tree, not individual cases). Some also have \"travel_history\" in the name and no other data, not sure what they are for yet. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"nodes = root.descendants().filter(d => d.data.node_attrs.author && d.data.node_attrs.division)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"simplelegend = md`## Simple Legend\nLet's first render out a very simple legend for colors using html to make sure we understand the data. We programatically pull out the color key which is included in the meta of the data we downloaded.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// coloringKey = data.meta.display_defaults.color_by\ncoloringKey = \"division\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"colorings = data.meta.colorings.filter(d => d.key == coloringKey)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"divisions = colorings.scale.map(d => d[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"divisionColors = {\n let obj = {}\n colorings.scale.forEach(function(d,i) {\n obj[d[0]] = {color: d[1], index: i }\n })\n return function(key) {\n return obj[key] || { color: \"gray\", index: 0 }\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"countryColors = {\n let obj = {}\n data.meta.colorings.filter(d => d.key == \"country\")[0].scale.forEach(function(d,i) {\n obj[d[0]] = {color: d[1], index: i }\n })\n return function(key) {\n return obj[key] || { color: \"gray\", index: -1 }\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"colorScales = {\n return {\n \"division\": divisionColors,\n \"country\": countryColors,\n \"region\": regionColors,\n \"clade_membership\": cladeColors\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"simpleLegend = {\n let div = html`\n\n

\n`\n \n let divs = d3.select(div).select(\".legend\").selectAll(\"div.item\")\n .data(colorings.scale)\n .join(\n enter => {\n let dd = enter.append(\"div\").classed(\"item\", true)\n dd.append(\"span\").classed(\"box\", true)\n .style(\"background-color\", d => d[1])\n dd.append(\"span\").classed(\"text\", true)\n .text(d => d[0])\n }\n )\n .classed(\"item\", true)\n \n \n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"groupedlegend = md`## A Grouped Legend\nThere are a lot of divisions, lets group them by their region.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"divisionsByRegion = d3.rollup(nodes, \n v => v.length, \n d => d.data.node_attrs.region.value,\n d => d.data.node_attrs.division.value\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"countryByRegion = d3.rollup(nodes, \n v => v.length, \n d => d.data.node_attrs.region.value,\n d => d.data.node_attrs.country.value\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"divisionsByCountry = d3.rollup(nodes, \n v => v.length, \n d => d.data.node_attrs.country.value,\n d => d.data.node_attrs.division.value\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"countriesByDivision = d3.rollup(nodes, \n v => v.length, \n d => d.data.node_attrs.division.value,\n d => d.data.node_attrs.country.value\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"regionsByDivision = d3.rollup(nodes, \n v => v[0].data.node_attrs.region.value, \n d => d.data.node_attrs.division.value\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"regionsByCountry = d3.rollup(nodes, \n v => v[0].data.node_attrs.region.value, \n d => d.data.node_attrs.country.value,\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"regionsBy = {\n let cladeMap = new Map()\n clades.forEach(c => cladeMap.set(c, c))\n return {\n \"division\": regionsByDivision,\n \"country\": regionsByCountry,\n \"clade_membership\": cladeMap\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"regions = Array.from(divisionsByRegion.keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"regionColors = createDiscreteScale(regions, \"categorical\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"md`### 'Divisions' organized by 'Region'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md`### Countries organized by 'Region'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"simplehistogram = md`### Simple Histogram\nLet's start by implementing a simple histogram. We want to group all of the cases by day, count them and display those as bars.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"nodesByDay = Array.from(d3.rollup(nodes, \n v => v.length, \n d => numericToCalendar(d.data.node_attrs.num_date.value)\n ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"height = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"margin = ({top: 0, right: 10, bottom: 20, left: 15})","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"simpleHisto(nodesByDay, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"x = d3.scaleBand()\n .domain(dateRange)\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(nodesByDay, d => d[1])])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"dateRange = d3.timeDay.range(new Date(start_date), d3.timeDay.offset(new Date(end_date),1)).map(d3.timeFormat(\"%Y-%m-%d\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"xTicks = d3.ticks(0,dateRange.length-1, width / 120).map(i => dateRange[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"xAxis = g => g\n .call(d3.axisBottom(x)\n .tickValues(xTicks)\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n // .attr(\"stroke-opacity\", 0.8)\n .style(\"stroke\", \"#999\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"xAxisLines = function(tickValues, height, margin, color) {\n return function(g) {\n return g\n .call(d3.axisTop(x)\n .tickValues(tickValues)\n .tickSizeOuter(0)\n .tickSize(height - margin.top - margin.bottom))\n .call(g => g.selectAll(\".tick text\").remove())\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\")\n .attr(\"stroke-opacity\", 0.8)\n .style(\"stroke\", color)\n // .attr(\"stroke-dasharray\", \"4,1\")\n )\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"stackedhistogram = md`### Stacked Histogram - Administrative Division\nNow let's split each bucket into it's administrative division, the same as our simple legend above.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"pivotKeys = function(pivot) {\n return d3.nest()\n .key(d => d.data.node_attrs[pivot].value)\n .rollup(leaves => leaves.length)\n .entries(nodes)\n .map(d => d.key)\n .sort((a,b) => {\n return colorScales[pivot](a).index - colorScales[pivot](b).index\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"pivotNodes = function(pivot){\n let rolledup = d3.rollup(nodes, \n // we return the list of nodes as a Map\n v => v.length || 0,\n // first we group by the date as a string\n d => numericToCalendar(d.data.node_attrs.num_date.value), \n // then we group by the division\n d => d.data.node_attrs[pivot].value\n )\n \n let keys = pivotKeys(pivot)\n \n // this is me not being super familiar with d3.stack and using maps\n // I'm going to create empty entries for missing divisions/date combinations\n dateRange.forEach(d => {\n let m = rolledup.get(d)\n if(!m) {\n m = new Map()\n }\n keys.forEach(key => {\n if(!m.get(key)) {\n m.set(key, 0)\n }\n })\n rolledup.set(d, m)\n })\n return rolledup\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"nodesByDivision = pivotNodes(\"division\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":"divisionSeries = pivotSeries(\"division\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"stackedHisto(divisionSeries, height2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"height2 = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`It's a one-line modification to turn the stack into a \"stream\", which we can visualize as either bars or area charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"divisionSeriesStream = pivotSeries(\"division\", d3.stackOffsetSilhouette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"streamedHisto(divisionSeriesStream, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"streamGraph(divisionSeriesStream, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"tooltip = md`## Tooltip Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"tooltipWidth = 320","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"tooltipHeight = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"tooltipProto = {\n let div = html`\n\n

\n`\n let className = \"tooltip_proto\"\n let tooltipDiv = makeTooltip(className)\n d3.select(div).select(\"div\").node().appendChild(tooltipDiv)\n const tooltip = d3.select(tooltipDiv).select(\".\" + className)\n \n tooltipDiv.update(null, \"2020-03-26\", divisionSeries)\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1664,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"stackedHisto(countrySeries, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"function pointsByDate(data) {\n let points = {}\n let total = 0\n data.forEach(series => {\n series.forEach(d => {\n if(!points[d.data.date]) points[d.data.date] = { points: [], total: 0 }\n if(d.data.value > 0) {\n points[d.data.date].points.push(d.data)\n points[d.data.date].total += d.data.value\n }\n })\n })\n return points \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`### Colored by Clade`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"nodesByClade = {\n let rolledup = d3.rollup(nodes, \n // we return the list of nodes as a Map\n v => v.length || 0,\n // first we group by the date as a string\n d => numericToCalendar(d.data.node_attrs.num_date.value), \n // then we group by the division\n d => d.data.node_attrs.clade_membership.value\n )\n // this is me not being super familiar with d3.stack and using maps\n // I'm going to create empty entries for missing divisions/date combinations\n dateRange.forEach(d => {\n let m = rolledup.get(d)\n if(!m) {\n m = new Map()\n }\n clades.forEach(div => {\n // console.log(d, div, m.get(div))\n if(!m.get(div)) {\n m.set(div, 0)\n }\n })\n rolledup.set(d, m)\n })\n return rolledup\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"cladeSeries = pivotSeries(\"clade_membership\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"cladeSeriesStream = pivotSeries(\"clade_membership\", d3.stackOffsetSilhouette)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"cladeColors = {\n let scale = createDiscreteScale(clades, \"categorical\")\n return function(key) {\n return {\n color: scale(key),\n index: clades.indexOf(key)\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"clades = Array.from(d3.group(nodes, d => d.data.node_attrs.clade_membership.value).keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"stackedHisto(cladeSeries, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"streamedHisto(cladeSeriesStream, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"streamGraph(cladeSeriesStream, height2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"md`### Colored by Country`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"countrySeries = pivotSeries(\"country\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"stackedHisto(countrySeries, 60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`## Time ranges\n\nA key component for issue [817](https://github.com/nextstrain/auspice/issues/817) is showing a legend that reflects the selected date range (which updates when animating over time). Let's grab the min and max dates from the dataset, which uses a numerical representation that can be converted to and from human readable format with utility functions pulled from the Auspice source code (see below). \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"min_num_date = d3.min(nodes, d => d.data.node_attrs.num_date.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"start_date = numericToCalendar(min_num_date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"max_num_date = d3.max(nodes, d => d.data.node_attrs.num_date.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"end_date = numericToCalendar(max_num_date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof range = rangeSlider({\n min: min_num_date, \n max: max_num_date + 0.001, // the precision of the slider is lower than the date values\n value: this ? this.value : [min_num_date, max_num_date + 0.001],\n // Custom slider CSS, replaces all styles.\n theme: themes[\"Chrome macOS\"],\n color: \"magenta\",\n format: function(d) { return numericToCalendar(d) }, // render the human readable dates\n title: 'Date Range',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"simpleHisto(nodesByDay, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"range","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`### Filtered cases\nLet's filter down the cases to only those within the time period.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"rangeFilteredNodes = nodes.filter(function(d) {\n const v = d.data.node_attrs.num_date.value\n return v >= range[0] && v <= range[1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`We can also filter down to a single division`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"filteredByDay = Array.from(d3.rollup(nodes.filter(d => d.data.node_attrs.division.value == \"Grand Princess\"), \n v => v.length, \n d => numericToCalendar(d.data.node_attrs.num_date.value)\n ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`## Helper functions\nTaken from [Auspice source code](https://github.com/nextstrain/auspice).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"/**\n * Convert a numeric date to a calendar date (which is nicer to display)\n * This is (for CE dates) meant to be used as the inverse ofthe TreeTime\n * function `numeric_date` which places the numeric date at noon (12h00),\n * i.e. Jan 1 is 0.5/365 of a year (if the year is not a leap year).\n * @param {numeric} numDate Numeric date\n * @returns {string} date in YYYY-MM-DD format for CE dates, YYYY for BCE dates\n */\nfunction numericToCalendar(numDate) {\n /* for BCE dates, return the (rounded) year */\n if (numDate<0) {\n return Math.round(numDate).toString();\n }\n /* for CE dates, return string in YYYY-MM-DD format */\n /* Beware: for `Date`, months are 0-indexed, days are 1-indexed */\n const fracPart = numDate%1;\n const year = parseInt(numDate, 10);\n const nDaysInYear = isLeapYear(year) ? 366 : 365;\n const nDays = fracPart * nDaysInYear;\n const date = new Date((new Date(year, 0, 1)).getTime() + nDays*24*60*60*1000);\n return dateToString(date);\n};\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"function calendarToNumeric(calDate) {\n if (calDate[0]==='-') {\n const pieces = calDate.substring(1).split('-');\n return -parseFloat(pieces[0]);\n }\n /* Beware: for `Date`, months are 0-indexed, days are 1-indexed */\n const [year, month, day] = calDate.split(\"-\").map((n) => parseInt(n, 10));\n const oneDayInMs = 86400000; // 1000 * 60 * 60 * 24\n /* add on 1/2 day to let time represent noon (12h00) */\n const elapsedDaysInYear = (Date.UTC(year, month-1, day) - Date.UTC(year, 0, 1)) / oneDayInMs + 0.5;\n const fracPart = elapsedDaysInYear / (isLeapYear(year) ? 366 : 365);\n return year + fracPart;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"function dateToString(date) {\n return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"function isLeapYear(year) {\n return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"createDiscreteScale = (domain, type) => {\n const unknownColor = \"#AAAAAA\"\n // note: colors[n] has n colors\n let colorList;\n if (type===\"ordinal\" || type===\"categorical\") {\n /* TODO: use different colours! */\n colorList = domain.length <= colors.length ?\n colors[domain.length].slice() :\n colors[colors.length - 1].slice();\n }\n const scale = d3.scaleOrdinal().domain(domain).range(colorList);\n return (val) => ((val === undefined || domain.indexOf(val) === -1)) ? unknownColor : scale(val);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`## Reference Notebooks\nThe following observable notebooks were instrumental in building this one:\n\n* [Range Input](https://observablehq.com/@mootari/range-slider)\n* [Data-driven Range Sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders)\n* [Markdown Cheatsheet](https://observablehq.com/@ajlimbert/github-flavored-markdown-cheatsheet-observable)\n* [Revenue By Music Format](https://observablehq.com/@mbostock/revenue-by-music-format-1973-2018) for the stacked bar chart\n* [d3-group](https://observablehq.com/@d3/d3-group)\n* [Styled Axes](https://observablehq.com/@d3/styled-axes)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"import {rangeSlider, themes} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}