trajectories = { const margin = { top: 20, bottom: 20, left: 20, right: 10 }; const threshold = 100; const data = new Map( [...recordsByGeography.entries()].map(([fips, entries]) => [ fips, entries .filter(d => d.cases >= threshold) .map((d, i) => ({ day: i, value: d.cases })) ]) ); const days = data.get("US").slice(-1)[0].day; const x = d3 .scaleLinear() .domain([0, days + 2]) .range([2 * margin.left, width - margin.right]) .nice(); const xAxis = g => g.call(d3.axisBottom(x).ticks(days)).call(g => g .selectAll("text") .style("text-anchor", "middle") .style("font-size", "small") .style("font-weight", "normal") .text(d => d) ); const y = d3 .scaleLog() .domain([ threshold, d3.max(recordsByGeography.get(selectedState), d => d.cases) ]) .range([width * 0.5 - margin.bottom, margin.top]) .nice(); const yAxis = g => g .attr("transform", `translate(${2 * margin.left},0)`) .call(d3.axisLeft(y).ticks(6, "~s")) .call(g => g .style("font-size", "small") .select(".domain") .remove() ); const line = d3 .line() .defined(d => !isNaN(d.value)) .x(d => x(d.day)) .y(d => y(d.value)); // color scheme is "bold" from https://carto.com/carto-colors/ const color = [ "#7F3C8D", "#11A579", "#3969AC", "#F2B701", "#E73F74", "#80BA5A", "#E68310", "#008695", "#CF1C90", "#f97b72", "#4b4b8f" ]; function pos(d) { return `translate(${x(d.day)},${y(d.value)})`; } function last(array) { return array.slice(-1)[0]; } let lines = Array.from(data.keys()).filter(v => v && v.length === 2); let primaries = new Set(["US", "53", "06", "34", "36", "26", "25", "08"]); if (selectedState !== "US") { lines = [ selectedState, ...Array.from(data.keys()).filter( v => v && v.length === 5 && v.startsWith(selectedState) ) ]; primaries = new Set( lines .sort((a, b) => d3.descending(data.get(a).length, data.get(b).length)) .slice(0, 4) ); } lines = lines.sort((a, b) => primaries.has(a) ? 1 : primaries.has(b) ? -1 : 0 ); lines = lines.sort((a, b) => (a === "08" ? 1 : b === "08" ? -1 : 0)); // HACK put CO on top const fmt = d3.format(".3~s"); function hover(el) { if ("ontouchstart" in document) { el.style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); } else { el.on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); } const trajectories = el.selectAll("g.trajectory"); const dot = el.select("g.dot"); function moved() { d3.event.preventDefault(); const i = Math.round(x.invert(d3.event.layerX)); if (i < 0) return; const distance = (s, i) => s && s.length > i ? Math.abs(y(s[i].value) - d3.event.layerY) : Infinity; const [fips, s] = d3.least(lines.map(l => [l, data.get(l)]), ([_, s]) => distance(s, i) ); if (distance(s, i) > 50) { left(); return; } else { entered(); } trajectories.classed("faded", true).classed("active", false); trajectories .filter(function() { return d3.select(this).attr("id") === fips; }) .classed("faded", false) .classed("active", true) .raise(); if (s) { dot.attr("transform", `translate(${x(s[i].day)},${y(s[i].value)})`); const prev = i > 1 ? s[i - 1] : s[i]; const next = i < s.length - 1 ? s[i + 1] : s[i]; const period = (next.day - prev.day) / (Math.log2(next.value) - Math.log2(prev.value)); const slope = (y(next.value) - y(prev.value)) / (x(next.day) - x(prev.day)); const rot = (Math.atan(slope) * 180) / Math.PI; dot .select("path") .attr("stroke", "#888") .attr("d", "M-75,0 L75,0") .attr("transform", `rotate(${rot})`); dot.select("text.count").text(fmt(s[i].value)); dot .select("text.slope") .text( `doubling every ${ period < 100 ? period.toPrecision(2) : period.round } days` ); dot.raise(); } } function entered() { dot.attr("display", null); } function left() { trajectories.classed("faded", false).classed("active", false); trajectories .filter(function() { return primaries.has(d3.select(this).attr("id")); }) .raise(); dot.attr("display", "none"); } left(); } const guides = [ { label: "slope = cases double every day", period: 1 }, { label: "...every second day", period: 2 }, { label: "...every third day", period: 3 }, { label: "...every week", period: 7 } ]; function drawguide(g) { const [y0, y1] = y.domain(); const daysToYMax = (Math.log2(y1) - Math.log2(y0)) * g.period; const l = [{ day: 0, value: y0 }]; const days = x.domain()[1]; if (daysToYMax < days) { l.push({ day: daysToYMax, value: y1 }); } else { l.push({ day: days, value: y0 * 2 ** (days / g.period) }); } const mid = { day: l[1].day / 2, value: y0 * 2 ** (l[1].day / 2 / g.period) }; const slope = (y(l[1].value) - y(l[0].value)) / (x(l[1].day) - x(l[0].day)); const rot = (Math.atan(slope) * 180) / Math.PI; return htm` ${g.label} `; } function drawline(fips, i) { const ds = data.get(fips); if (ds.length === 0) return; return htm` ${fips === "US" ? fips : fips2name(fips)} `; } const DOM = htm` `; return { x, y, xAxis, yAxis, DOM }; }