31:Tb15,hover = svg => { let left = svg.select('.x-axis text:first-child'); let right = svg.select('.x-axis text:last-child'); svg .on('mouseenter', update) .on('mousemove', update) .on('mouseleave', done) .on('click', done); svg .select('.touch-surface') .on('touchstart', update) .on('touchmove', update) .on('click', () => d3.event.stopPropagation()); // all x-coordinates available for snapping let snapsBySvg = svg .data() .map(d => d.peaks.map(p => xscale(d.data[p].date))); let snapsUnion = Array.from(new Set(snapsBySvg.flatMap(identity))); function done() { svg.classed('hovering', false); left.classed('hidden', false); right.classed('hidden', false); } function update(d, i) { // `update` is called in the context of a particular svg element, with that element's data. // Therefore `this` here refers to something other than `this` inside the `svg.each`. let [hx, hy] = d3.mouse(this); d3.event.type == "touchmove" && d3.event.preventDefault(); // We resolve peak snapping with respect to the hovered svg. // potential x-coordinates to snap this hover position to // snapsBySvg[i] let snaps = snapsUnion.filter(x => Math.abs(x - hx) < 5); let snapped = snaps.length > 0; if (snapped) { hx = snaps[findmin(snaps, x => Math.abs(x - hx))]; } let hdate = xscale.invert(hx); // Re-set `hx` to clamp the x position to the projected data range of the x scale. // Bug: this will not do the right thing if one time series is shorter than another — // the label will contain the correct date but the x position will not snap to it. // This is because the clamped xscale ranges across the entire [start, end] date range. hx = xscale(hdate); let anchor = hx > width - 200 && hx > 150 ? 'end' : 'start'; svg.classed('hovering', true).each(function({ data, peaks, y }, i) { let value = data[findmin(data, d => Math.abs(d.date - hdate))]; let date = value.date; let timestamp = date; let dateLabel = date.toLocaleString(undefined, { month: "long", day: "numeric" //, year: "numeric" }); // Hide axes when the label is near, or, to save intricate special-casing, // if the screen is small. left.classed('hidden', hx < 60 || width < 400); right.classed('hidden', hx > width - 300 || width < 400); let hover = d3.select(this).select('.hover'); hover .attr('transform', `translate(${hx}, 0)`) .classed('snapped', snapped && snapsBySvg[i].includes(hx)); hover .select('text') .attr('text-anchor', anchor) .text(`${dateLabel} — ${value.casos.toLocaleString("de-DE")} casos`); hover.select('line').attr('y1', y(value)); }); } return svg.nodes(); }32:T1266,chart = ( data, peakConfig = { lookaround, sensitivity, coalesce, full: false }, editable = false ) => { // Field accessor functions let xf = d => d.date; let yf = d => d.casos; let x = d => xscale(xf(d)); let peaks = detectPeaks(data, yf, peakConfig); let [min, max] = d3.extent(data, yf); if (min === max) { max += 0.01; // Prevent degenerate plots (e.g. all zeros) by giving us a vertical height to play with } // Heuristic: We want to offset the title in the event that it may overlap with a peak label. // If the peak is more than 75% of the way to being the tallest on screen, and in the x region // under the title, offset it. We also always keep editable charts at max height so they don't skip around. // In that case, we make the offset a bit smaller so they take up less room, making it look a bit worse when there's an early peak. let titleOffset = 25 + (editable || peaks.some( peak => yf(data[peak]) / max > 0.75 && xscale(xf(data[peak])) < 200 ) ? editable ? 40 : 45 : 0); // Dimension calculation let hoverOffset = 20; let height = 110 + titleOffset + hoverOffset; let chartHeight = height - hoverOffset; // The y scale depends on dimensions, so compute it here let yscale = d3.scaleLinear([0, max], [chartHeight, titleOffset]); let y = d => yscale(yf(d)); // Area generation for paths let curve = d3.curveMonotoneX; let line = d3 .line() .x(x) .y(y) .curve(curve); let area = d3 .area() .x(x) .y0(height - hoverOffset) .y1(y) .curve(curve); // Labeling and the naming of things let labelFormat = { // Add years when necessary for disambiguation year: start.getYear() == end.getYear() ? undefined : "numeric", month: "long", day: "numeric" }; let startLabel = data[0].date.toLocaleString(undefined, labelFormat); let endLabel = data[data.length - 1].date.toLocaleString( undefined, labelFormat ); // Appropriately subtitle charts that span multiple years let yearRange = start.getYear() == end.getYear() ? start.getFullYear() : start.getFullYear() + '–' + end.getFullYear(); // Visualizing peaks let offsets = peakOffsets(peaks, x, y, data); let peakMarkup = peaks.map((p, i) => { let xpos = x(data[p]), ypos = y(data[p]), o = offsets; // Anchor the text based on proximity to the sides of the visualization let anchor = xpos < 20 ? 'start' : xpos > width - 20 ? 'end' : 'middle'; // Use short or long date formats based on whether you are part of a contiguous run of three offset peaks let labelStyle = o[i] && o[i - 1] && o[i + 1] && (o[i - 2] || o[i + 2]) ? "short" : "long"; let label = peakLabel(data[p], labelStyle); return ` ${label} `; }); let node = html` `; // Augment the SVG with data for use by the hover function d3.select(node).datum({ data, peaks, y }); return node; }33:T635,function detectPeaks(data, accessor, options) { let { lookaround, sensitivity, coalesce, full } = Object.assign( { lookaround: 7, sensitivity: 2, coalesce: 15, full: false }, options || accessor ); let values = typeof accessor == "function" ? data.map(accessor) : data; // Compute a peakiness score for every sample value in `data` // We normalize the scale of the scores by mean-centering and dividing by the standard deviation // to get a dimensionless quantity such that can be used as a sensitivity parameter // across different scales of data (s. t. normalize(x) == normalize(k*x)) let scores = normalize( values.map((value, index) => peakiness( values.slice(Math.max(0, index - lookaround), index), value, values.slice(index + 1, index + lookaround + 1) ) ) ); // Candidate peaks are indices whose score is above the sensitivity threshold let candidates = d3 .range(scores.length) .filter(index => scores[index] > sensitivity); // If we have multiple peaks, coalesce those that are close together let groups = candidates.length ? [[candidates[0]]] : []; d3.pairs(candidates).forEach(([a, b]) => { if (b - a < coalesce) { groups[groups.length - 1].push(b); } else { groups.push([b]); } }); // Represent every group of peaks by the highest peak in the group let peaks = groups.map( group => group[d3.scan(group, (a, b) => values[b] - values[a])] ); return full ? { data, values, scores, candidates, groups, peaks } : peaks; }34:T560,timeSeriesStyle = html` `35:[{"id":"aea3ac498de67429fdda76a47f1bdb6fee705cd5915e53b4827e87703159d7db0544e6ab5b6d61ca1e728371e1d8a963ee5d0ee8451ca4ae96ef193ab2135b0a","href":"https://static.observableusercontent.com/files/aea3ac498de67429fdda76a47f1bdb6fee705cd5915e53b4827e87703159d7db0544e6ab5b6d61ca1e728371e1d8a963ee5d0ee8451ca4ae96ef193ab2135b0a","name":"casos_tecnica_ccaa.csv","type":"text/csv","lastModified":1613387633320.317,"size":224219}] 2f:{"title":" Picos de COVID-19 en Madrid y Cataluña","cells":[{"id":0,"value":"html`

dd.ISO === d.ccaa_iso).CCAA);\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"rawData = FileAttachment(\"casos_tecnica_ccaa.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"dict = [\n { ISO: \"AN\", CCAA: \"Andalucía\" },\n { ISO: \"AR\", CCAA: \"Aragón\" },\n { ISO: \"AS\", CCAA: \"Asturias\" },\n { ISO: \"CN\", CCAA: \"Canarias\" },\n { ISO: \"CB\", CCAA: \"Cantabria\" },\n { ISO: \"CM\", CCAA: \"Castilla-La Mancha\" },\n { ISO: \"CL\", CCAA: \"Castilla y León\" },\n { ISO: \"CT\", CCAA: \"Cataluña\" },\n { ISO: \"EX\", CCAA: \"Extremadura\" },\n { ISO: \"GA\", CCAA: \"Galicia\" },\n { ISO: \"IB\", CCAA: \"Islas Baleares\" },\n { ISO: \"RI\", CCAA: \"La Rioja\" },\n { ISO: \"MD\", CCAA: \"Madrid\" },\n { ISO: \"MC\", CCAA: \"Murcia\" },\n { ISO: \"NC\", CCAA: \"Navarra\" },\n { ISO: \"PV\", CCAA: \"País Vasco\" },\n { ISO: \"VC\", CCAA: \"Comunidad Valenciana\" },\n { ISO: \"CE\", CCAA: \"Ceuta\" },\n { ISO: \"ML\", CCAA: \"Melilla\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"arrow = `M2.73484 7.26517C2.88128 7.41161 3.11872 7.41161 3.26517 7.26517L5.65165 4.87868C5.7981 4.73223 5.7981 4.4948 5.65165 4.34835C5.5052 4.2019 5.26777 4.2019 5.12132 4.34835L3 6.46967L0.87868 4.34835C0.732233 4.2019 0.494796 4.2019 0.34835 4.34835C0.201903 4.4948 0.201903 4.73223 0.34835 4.87868L2.73484 7.26517ZM2.625 1.63918e-08L2.625 7L3.375 7L3.375 -1.63918e-08L2.625 1.63918e-08Z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"gradient = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"fontStyle = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}