29:null 2a:["$","title",null,{"children":"Feature-Action Design Patterns for Storytelling Visualizations with Time Series Data | Scott Jones | Observable"}] 2f:T700,ts = { toggleDataGaussianBars; const data = infectionRateByLocation[region]; const smooth = gaussianSmoothTS(data, 3, smoothing); const ts = new TimeSeries(smooth, visWidth) .color("rgba(0,0,0,0.1)") .ticks(30); // Booleans for user checkbox selections const showRises = eventSelections.includes("Rises"); const showFalls = eventSelections.includes("Falls"); const showPeaks = eventSelections.includes("Peaks"); // Arrays representing detected data features const rises = findRises(smooth); const falls = findFalls(smooth); const peaks = findPeaks(smooth); // Combine data features if chosen by user const segs = [] .concat(showPeaks ? peaks : []) .concat(showRises ? rises : []) .concat(showFalls ? falls : []); // If there is at least one selected checkbox add feature to time series if (eventSelections.length) { ts.addExtraDatasets( createDataGroup( // Create line segments based on feature start and end segs.map((o) => smooth.slice(o.start, o.end + 1)), // Each features' color is defined in the below array [] .concat(showPeaks ? [...Array(peaks.length)].map(getColor) : []) .concat(showRises ? Array(rises.length).fill("green") : []) .concat(showFalls ? Array(falls.length).fill("red") : []) ), true ); } // If we are displaying peaks also draw at dot at the maximum point if (showPeaks) { const container = d3.select(ts.renderSVG()).append("g"); const xSc = ts.getXScale(); const ySc = ts.getYScale(); peaks.forEach((p) => container .append("circle") .attr("cx", xSc(smooth[p.peakIdx].date)) .attr("cy", ySc(smooth[p.peakIdx].y)) .attr("r", 4) ); } return ts.plot(); }30:T726,{ const data = infectionRateByLocation[region]; const smooth = gaussianSmoothTS(data, 3, smoothing); const measure = "cases per day"; // Create lookuptable with up-to-date event outputs const table = new LookupTable(csvTableOutputs); let events = createEventsFromSelection(smooth, measure); if (eventSelections.length) { const tsBar = new TimeSeries(smooth, 1000) .svg(barRanksSVG) .color("rgba(0,0,0,0.1)") .ticks(30) .yLabel2("Rank"); tsBar.addExtraDatasets(createDataGroup(dataGaussians, ["rgba(0,0,0,0)"])); events.forEach((e, idx) => { let barColor = getColor(0, idx); d3.select(barRanksSVG) .append("rect") .attr("x", tsBar.getXScale()(e._date) - 2.5) .attr("y", tsBar.getYScale2()(e.rank)) .attr("width", 5) .attr("height", 250 - tsBar.getYScale2()(e.rank)) .attr("fill", barColor); }); tsBar.plot(); const tsBarGauss = new TimeSeries(smooth, 1000) .svg(gaussianBarRanksSVG) .color("rgba(0,0,0,0.1)") .ticks(30) .yLabel2("Rank"); tsBarGauss.addExtraDatasets( createDataGroup(dataGaussians, dataGaussians.map(getColor)) ); tsBarGauss.plot(); if (toggleDataGaussianBars.length) { events.forEach((e, idx) => { d3.select(gaussianBarRanksSVG) .append("rect") .attr("x", tsBarGauss.getXScale()(e._date) - 2.5) .attr("y", tsBarGauss.getYScale2()(e.rank)) .attr("width", 5) .attr("height", 250 - tsBarGauss.getYScale2()(e.rank)) .attr("fill", "black"); }); } } events = events.map((e, idx) => { return { type: e.type, rank: e.rank, date: e.date, description: table.generateOutput(e) }; }); return Inputs.table(events, { layout: "auto" }); }31:T598,{ const data = infectionRateByLocation[region]; const smooth = gaussianSmoothTS(data, 3, smoothing); const ts = new TimeSeries(smooth, visWidth) .title("Combined Max Bounds") .color("rgba(0,0,0,0)") .ticks(30) .yLabel2("Rank"); if (eventSelections.length) { ts.addExtraDatasets( createDataGroup( [dataBounds, semanticBounds, combinedBounds], ["rgba(225,10,90,0.3)", "rgba(10,80,225,0.2)", "rgba(140,100,200,1)"] ) ); } let key = d3 .select(ts.renderSVG()) .append("g") .attr("transform", "translate(100,40)"); key.append("text").text("Key"); key .append("rect") .style("fill", "rgba(10,80,225,1)") .attr("width", 10) .attr("height", 10) .attr("y", 10); key .append("text") .attr("y", 20) .attr("x", 15) .style("font-size", 12) .text("Semantic Event Gaussians"); key .append("rect") .style("fill", "rgba(225,10,90,1)") .attr("width", 10) .attr("height", 10) .attr("y", 30); key .append("text") .attr("y", 40) .attr("x", 15) .style("font-size", 12) .text("Data Event Gaussians"); key .append("rect") .style("fill", "rgba(140,100,200,1)") .attr("width", 10) .attr("height", 10) .attr("y", 50); key .append("text") .attr("y", 60) .attr("x", 15) .style("font-size", 12) .text("Combined Gaussian"); return ts.plot(); }32:T416,{ const data = infectionRateByLocation[region]; const smooth = gaussianSmoothTS(data, 3, smoothing); let peaks = findPeaks(combinedBounds).sort((a, b) => b.height - a.height); peaks = peakSegment(peaks, combinedBounds.length, ignoreHeight1); const ts = new TimeSeries(combinedBounds, visWidth) .yLabel("Rank") .color("rgba(140,100,200,1)") .ticks(30); const container = d3.select(ts.renderSVG()).append("g"); const xSc = ts.getXScale(); const ySc = ts.getYScale(); peaks.forEach((v, i) => container .append("circle") .attr("cx", xSc(combinedBounds[v.idx].date)) .attr("cy", ySc(combinedBounds[v.idx].y)) .attr("fill", i < N - 1 ? "red" : "black") .attr("r", 4) ); container .selectAll("line") .data(peaks.slice(0, N - 1)) .join("line") .attr("x1", (d) => xSc(combinedBounds[d.idx].date)) .attr("x2", (d) => xSc(combinedBounds[d.idx].date)) .attr("y1", (d) => 0) .attr("y2", (d) => ts._height) .attr("stroke", "black"); return ts.plot(); }33:T944,/* Fall detection function. Using a window size of 20 we count the number of negative gradients. If this number is above a threshold we keep sliding the window. Once our bool fails we save segment in falls array and continue searching. */ findFalls = (smoothData) => { // Normalise y values between 0 and 1 const norm = normaliseTS(smoothData).map((o) => o.y); let falls = []; let deltas = []; let start, end, i, segment, normWidth, normGrad, grad, height, maxIdx, minIdx; i = start = end = 0; // Continue looping till we have looked at every point while (i + 20 < norm.length) { for (; i < end + 20 && i < norm.length - 1; i++) { deltas[i % 20] = norm[i + 1] - norm[i] < -0.001; } if (i >= norm.length - 1) continue; // While line does not have a majority negative deltas keep incrementing i while ( i < norm.length - 1 && !(deltas.reduce((sum, bool) => sum + bool) > 5) ) { deltas[i % 20] = norm[i + 1] - norm[i] < -0.001; i++; } if (i >= norm.length - 1) continue; start = i == 20 ? 0 : i - 15; // Until line has a great majority of negative deltas keep incrementing i while ( i < norm.length - 1 && deltas.reduce((sum, bool) => sum + bool) > 5 ) { deltas[i % 20] = norm[i + 1] - norm[i] < 0; i++; } end = i >= norm.length - 1 ? norm.length - 1 : i - 15; // Extract line segment segment = norm.slice(start, end + 1); maxIdx = start + d3.maxIndex(segment); minIdx = start + d3.minIndex(segment); // Trim line so no overflowing segements start = Math.max(maxIdx, start); // Should start at the highest point end = Math.min(minIdx, end); // Should end at the lowest point height = Math.abs(smoothData[end].y - smoothData[start].y); grad = height / (end - start); normWidth = (end - start) / norm.length; // Ratio of length of segment and total data size. normGrad = Math.abs((norm[end] - norm[start]) / (end - start)); // If the increase in y is passed a certain threshold add to rises array. if (norm[end] - norm[start] < -normWidth * 0.6) { falls.push({ start: start, end: end, height: height, grad: grad, normGrad: normGrad, rank: normGrad > 0.01 ? 2 : 1 }); i = end; } i++; } return falls; }34:T986,/* Rise detection function. Using a window size of 20 we count the number of positive gradients. If this number is above a threshold we keep sliding the window. Once our bool fails we save segment in rises array and continue searching. */ findRises = (smoothData) => { // Normalise y values between 0 and 1 const norm = normaliseTS(smoothData).map((o) => o.y); let rises = []; let deltas = []; let rDeltas = []; let start, end, i, segment, normWidth, normGrad, grad, height, maxIdx, minIdx; i = start = end = 0; // Continue looping till we have looked at every point while (i + 20 < norm.length) { for (; i < end + 20 && i < norm.length - 1; i++) { deltas[i % 20] = norm[i + 1] - norm[i] > 0.001; } if (i >= norm.length - 1) continue; // While line does not have a majority positive deltas keep incrementing i while ( i < norm.length - 1 && !(deltas.reduce((sum, bool) => sum + bool) > 5) ) { deltas[i % 20] = norm[i + 1] - norm[i] > 0.001; i++; } if (i >= norm.length - 1) continue; start = i == 20 ? 0 : i - 10; // Until line has a great majority of negative deltas keep incrementing i while ( i < norm.length - 1 && deltas.reduce((sum, bool) => sum + bool) > 5 ) { deltas[i % 20] = norm[i + 1] - norm[i] > 0; i++; } end = i >= norm.length - 1 ? norm.length - 1 : i - 15; // Extract line segment segment = norm.slice(start, end + 1); maxIdx = start + d3.maxIndex(segment); minIdx = start + d3.minIndex(segment); // Trim line so no overflowing segements start = Math.max(minIdx, start); // Should start at the minimum point end = Math.min(maxIdx, end); // Should end at the maximum point height = Math.abs(smoothData[end].y - smoothData[start].y); grad = height / (end - start); normWidth = (end - start) / norm.length; // Ratio of length of segment and total data size. normGrad = Math.abs((norm[end] - norm[start]) / (end - start)); // If the decrease in y is passed a certain threshold add to rises array. if (norm[end] - norm[start] > normWidth * 0.6) { rises.push({ start: start, end: end, height: height, grad: grad, normGrad: normGrad, rank: normGrad > 0.01 ? 2 : 1 }); i = end; } i++; } console.log(deltas); console.log(rDeltas); return rises; }35:T631,/* Main Peak finding function. For defined window sizes we detect peaks in segments. We remove duplicates and then remove peaks that are part of a larger peak. */ findPeaks = (smoothData, removeChildPeaks = true) => { // Normalise y values between 0 and 1 const norm = normaliseTS(smoothData).map((o) => o.y); let peaks = []; // Peak window search sizes. let sizes = [100, 60, 30, 10]; let peakObjs; for (let i = 0; i < sizes.length; i++) { // Find peaks at window size peakObjs = findPeaksHelper(norm, sizes[i]); // Set height to true height (has to be done here as helper fnc is given norm) peakObjs.forEach((p) => (p.height = smoothData[p.peakIdx].y)); peaks = peaks.concat(peakObjs); } // Remove duplicates and sort from lowest to highest peaks = peaks .reduce( (res, curr) => res.find((p) => p.peakIdx == curr.peakIdx) ? res : res.concat([curr]), [] ) .sort((p1, p2) => smoothData[p1.peakIdx].y - smoothData[p2.peakIdx].y); // Peak intersection detection function const peaksIntersect = (p1, p2) => { return ( (p1.peakIdx <= p2.end && p1.peakIdx >= p2.start) || (p2.peakIdx <= p1.end && p2.peakIdx >= p1.start) ); }; // For each peak if there is a larger peak that intersects it do not add to uniquePeaks let uniquePeaks = []; peaks.forEach((p1, i) => { let largerPeaks = peaks.slice(i + 1); let intersect = largerPeaks.find((p2) => peaksIntersect(p1, p2)); if (!intersect) uniquePeaks.push(p1); }); return removeChildPeaks ? uniquePeaks : peaks; }36:T49a,/* Peak finding helper function. Given the normalised data and a window size. Function slides over data detecting peaks. */ findPeaksHelper = (norm, size) => { let peaks = []; // Array of peaks to be filled // Starting at window size 100, we detect peaks in smaller and smaller sizes let segment, peak, peakIdx, start, end; for (let i = 0; i < norm.length - size; i += 1) { // Extract the initial search window segment = norm.slice(i, i + size); // Classify segment and check if peak is detected peak = detectPeakInSegment(segment, norm.length); // If no peak detected move on if (!peak) continue; // Otherwise // Set the index of the peak to the max value in the segment peakIdx = i + peak.maxIdx; // Reposition segment to be centered around peak start = findPeakStart(peakIdx, norm); end = findPeakEnd(peakIdx, norm); peaks.push({ start: start, peakIdx: peakIdx, normHeight: norm[peakIdx], normWidth: (end - start) / norm.length, end: end, width: end - start }); // Since we recentered the segment we set i for next loop i = peakIdx; } return peaks; }37:T617,function createEventsFromSelection(smoothData, metric) { // Bools from checkboxes const showRises = eventSelections.includes("Rises"); const showFalls = eventSelections.includes("Falls"); const showPeaks = eventSelections.includes("Peaks"); // Detect and create Rise events const rises = findRises(smoothData).map((r) => new Rise(smoothData[r.start].date) .setStart(smoothData[r.start].date) .setEnd(smoothData[r.end].date) .setMetric(metric) .setHeight(Math.round(r.height)) .setGrad(r.grad) .setNormGrad(r.normGrad) .setRank(r.rank) ); // Detect and create Fall events const falls = findFalls(smoothData).map((f) => new Fall(smoothData[f.end].date) .setStart(smoothData[f.start].date) .setEnd(smoothData[f.end].date) .setMetric(metric) .setHeight(Math.round(f.height)) .setGrad(f.grad) .setNormGrad(f.normGrad) .setRank(f.rank) ); // Detect and create Peak events const peaks = findPeaks(smoothData).map((p) => new Peak(smoothData[p.peakIdx].date) .setStart(smoothData[p.start].date) .setEnd(smoothData[p.end].date) .setMetric(metric) .setHeight(Math.round(p.height)) .setNormHeight(p.normHeight) ); let events = []; // Based on user selection populate the events list with chosen events events = events .concat(showPeaks ? peaks : []) .concat(showRises ? rises : []) .concat(showFalls ? falls : []); return events.sort((e1, e2) => e2.rank - e1.rank); }38:T792,{ const data = infectionRateByLocation[region]; const smooth = gaussianSmoothTS(data, 3, smoothing); const tl = new AnnotatedTimeLine(smooth).svg(timelineSVG); const labels = [ { end: dateToIdx(new Date("2020-03-23"), smooth), annotation: { title: "23/03/2020", label: "First Lockdown in England announced." } }, { end: dateToIdx(new Date("2020-08-11"), smooth), annotation: { title: "11/08/2020", label: "Schools re-open." } }, { end: dateToIdx(new Date("2021-02-10"), smooth), annotation: { title: "10/02/2021", label: "One million Scots have received the first dose of a coronavirus vaccine." } }, { end: dateToIdx(new Date("2020-11-02"), smooth), annotation: { title: "02/11/2020", label: "A new, 5 level tier system is introduced into Scotland." } }, { end: dateToIdx(new Date("2021-07-04"), smooth), annotation: { title: "04/07/2021", label: "WHO finds that 6 out of Europe's 10 virus hotspots are in Scotland" } }, { end: dateToIdx(new Date("2020-11-20"), smooth), annotation: { title: "20/11/2020", label: "Non-essential travel between Scotland and England is made illegal." } } ]; const annotations = [{ start: 0, end: 0 }] .concat(labels) .concat( (toggle ? random10SemanticEvents : semanticEvents).reduce( (arr, curr, i) => arr.concat( (dateToIdx(curr.date, smooth) >= 0 && { end: dateToIdx(curr.date, smooth) }) || [] ), [] ) ) .concat({ end: smooth.length - 1 }); annotations.slice(1).forEach((o, i) => (o.start = annotations[i].end)); tl.annotations(annotations).plot(annotations.length - 1); return svg; }39:[{"id":"8036b78b8685e19573bcb831158f4827a356060309de53d6afdc33987218b6b98e28b90fa69c732010c1e23ef5c5bd0e39600b8b8c0caf0a6c87b911230bc5ce","href":"https://static.observableusercontent.com/files/8036b78b8685e19573bcb831158f4827a356060309de53d6afdc33987218b6b98e28b90fa69c732010c1e23ef5c5bd0e39600b8b8c0caf0a6c87b911230bc5ce","name":"semantic_events - semantic_events (1).csv","type":"text/csv","lastModified":1700266920941.302,"size":22700}] 2d:{"id":"0a6e9c35a809660e","slug":null,"title":"Feature-Action Design Patterns for Storytelling Visualizations with Time Series Data","thumbnail":"66ef2e8e331c525557a438f211d4e41cad62a009c547858dfdf841daea63bf11","access_level":"public","create_time":"$D2023-11-18T00:22:00.941Z","update_time":"$D2023-11-18T02:40:50.677Z","view_time":null,"first_public_time":"$D2023-11-18T00:22:00.941Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6e652efefd6b4de4","login":"scottwjones","name":"Scott Jones","avatar_url":"https://avatars-next.observableusercontent.com/76d7ecc64e987d577d6b367141650592362af5ed7cfc46d49f2896a455f9ec33","tier":"starter_2024"},"version":2434,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16b6c810f749ef07","login":"scottwjones","name":"Scott Jones","avatar_url":"https://avatars-next.observableusercontent.com/76d7ecc64e987d577d6b367141650592362af5ed7cfc46d49f2896a455f9ec33","tier":null}],"members":[{"type":"individual","id":"16b6c810f749ef07","login":"scottwjones","name":"Scott Jones","avatar_url":"https://avatars-next.observableusercontent.com/76d7ecc64e987d577d6b367141650592362af5ed7cfc46d49f2896a455f9ec33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Feature-Action Design Patterns for Storytelling Visualizations with Time Series Data","cells":[{"id":2405,"value":" # Feature-Action Design Patterns for Storytelling Visualizations with Time Series Data\nThis observable provides supplementary material to the submission of *\"Feature-Action Design Patterns for Storytelling Visualizations with Time Series Data\"*.\n\nBelow we have provided [links to visualisations](https://observablehq.com/d/0a6e9c35a809660e#cell-2409) and an [interactive explainer of how the algorithmic pipeline works](https://observablehq.com/d/0a6e9c35a809660e#cell-1214).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2409,"value":"## Observable Directory links:\nBelow we have included links to Observable notebooks containing the visualisations of the examples in the paper.\n\n#### 3.1 Single location and time Series\n* [Main Observable](https://observablehq.com/d/10ffe9d96bc4c0e2)\n___\n#### 3.2 Comparative Storyboard\n* [Main Observable](https://observablehq.com/d/e10f98502d473869)\n___\n#### 3.3 Scrollable Storyboard\n* [Main Observable](https://observablehq.com/d/1f3203c332533761)\n* [Scrollytelling component](https://observablehq.com/@scottwjones/scrollytelling-time-series)\n\n___\n#### Miscellaneous\n* [Gaussian methods](https://observablehq.com/@scottwjones/ranked-time-series-aggregation-and-segmentation)\n* [Custom Graphing tools library](https://observablehq.com/@scottwjones/graphing-tools-v2)\n* [Country Dataset](https://observablehq.com/@scottwjones/lockdown-restriction-data)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1214,"value":"md`\n---\n# Technical process\nBelow we interactively detail the algorithmic pipeline used in order to produce a visualisation.\n\n## Data Events\nFor data events, we need to detect them for a provided dataset.\nIn the below example we can decide to detect peaks, rising segments and falling segements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof region = Inputs.select(countryRegions[\"Scotland\"].sort(), {\n label: \"Select region\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2289,"value":"### Visualisation of detected events\nThe below graph shows the data features that have been detected in the data. We show peaks with a dot and rising and falling segments using colour.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2182,"value":"viewof visWidth = Inputs.range([600, 1000], {\n label: \"Width of visualisations\",\n value: 950\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"viewof eventSelections = Inputs.checkbox([\"Peaks\", \"Rises\", \"Falls\"], {\n label: \"Select Events\",\n value: [\"Peaks\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"md`### Data Event Ranking table\nThe below table shows the detected data events in the data and subset of their attributes.\nHere rank is calculated for each data event type. For example, the rank of the peaks is dependant\non the relative height of each peak.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2019,"value":"md`### Bar chart ranks\nVisual representation of the above ranked events using bar charts.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1979,"value":"barRanksSVG = {\n eventSelections;\n region;\n toggleDataGaussianBars;\n return DOM.svg(visWidth, 300);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1171,"value":"md`### Gaussian ranks\nThe data events are now converted to gaussian curves where the scale of the gaussian is proportional to its rank.\n\nYou can click to toggle the bars showing the ranks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2298,"value":"viewof toggleDataGaussianBars = Inputs.checkbox([\"Bars\"], {\n label: \"Toggle bars?\",\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2031,"value":"gaussianBarRanksSVG = {\n eventSelections;\n region;\n toggleDataGaussianBars;\n return DOM.svg(visWidth, 300);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1227,"value":"md`---\n## Semantic events\nFor the semantic events we do not have to detect anything. We are fed events and their respective rank.\nAll we need to do is plot the events as gaussians on the time series.\n\n### Timeline of Semantic events\nThe below events were webscraped from [wikipedia](https://en.wikipedia.org/wiki/COVID-19_pandemic_in_Scotland#Timeline) and\nmanually ranked. The timeline shows an example of the events that were used in this dataset. The timeline component is used in one of the storyboards.\n\nYou can choose to reduce the number of semantic events chosen using the toggle below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2106,"value":"viewof toggle = Inputs.toggle({\n label: \"Use fewer semantic events\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2069,"value":"timelineSVG = {\n toggle;\n region;\n return DOM.svg(visWidth, 300);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2325,"value":"### Semantic event table\nThe below table shows an example of the semantic dataset.\nAlthough not shown in this case, we might also expect a *\"type\"* attribute to be included in the data as well, such as **LOCKDOWN_START**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1252,"value":"viewof table = Inputs.table(toggle ? random10SemanticEvents : semanticEvents, {\n layout: \"auto\",\n sort: \"rank\",\n reverse: true,\n format: {\n rank: (x) => x.toFixed(1)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2328,"value":"### Gaussian ranks\nMuch like the data events, we too convert the semantic events into a timeseries consisting of gaussians. Again each gaussian is scaled to the rank of the event it is representing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2331,"value":"viewof toggleSemanticGaussianBars = Inputs.checkbox([\"Bars\"], {\n label: \"Toggle bars?\",\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"{\n const data = infectionRateByLocation[region];\n const smooth = gaussianSmoothTS(data, 3, smoothing);\n const ts = new TimeSeries(smooth, visWidth)\n .color(\"rgba(0,0,0,0)\")\n .ticks(30)\n .yLabel2(\"Rank\");\n ts.addExtraDatasets(\n createDataGroup(semanticGaussians, semanticGaussians.map(getColor))\n );\n\n ts.plot();\n\n if (toggleSemanticGaussianBars.length) {\n (toggle ? random10SemanticEvents : semanticEvents).forEach((e, idx) => {\n if (dateToIdx(e.date, smooth) == -1) return;\n \n d3.select(ts.renderSVG())\n .append(\"rect\")\n .attr(\"x\", ts.getXScale()(e.date) - 2.5)\n .attr(\"y\", ts.getYScale2()(e.rank))\n .attr(\"width\", 5)\n .attr(\"height\", 250 - ts.getYScale2()(e.rank))\n .attr(\"fill\", \"black\");\n });\n }\n\n return ts.renderSVG();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1292,"value":"md`\n---\n## Combining gaussian ranks\n**Calculating max-gaussian bounds**\n\nIn order to combine our gaussian ranks, we first need to calculate the curve that represents the maximum gaussian value for our data and semantic gaussian rank timeseries.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2349,"value":"viewof toggleDataGaussianTS = Inputs.checkbox([\"Gaussian TS\"], {\n label: \"Toggle gaussian timeseries?\",\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1313,"value":"{\n const data = infectionRateByLocation[region];\n const smooth = gaussianSmoothTS(data, 3, smoothing);\n\n const ts = new TimeSeries(dataBounds, visWidth)\n .title(\"Data Events Max Bounds\")\n .color(\"rgba(225,10,90,1)\")\n .ticks(30);\n\n if (toggleDataGaussianTS.length) { \n ts.addExtraDatasets(\n createDataGroup(dataGaussians, [\"grey\"]),\n true\n );\n }\n \n return ts.plot();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"{\n const data = infectionRateByLocation[region];\n const smooth = gaussianSmoothTS(data, 3, smoothing);\n\n const ts = new TimeSeries(semanticBounds, visWidth)\n .title(\"Semantic Events Max Bounds\")\n .color(\"rgba(10,80,225,1)\")\n .ticks(30);\n\n if (toggleDataGaussianTS.length) { \n ts.addExtraDatasets(\n createDataGroup(semanticGaussians, [\"grey\"]),\n true\n );\n }\n\n return ts.plot();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"md`** Combining the max bounds**\n\nNow that we have the max bounds for our data and semantic gaussian timeseries, we need to combine them into a single timeseries. Combining the max bounds is as simple as averaging the rank at each height.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1372,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1468,"value":"md`\n---\n## Gaussian Segmentation\nNow that we have the combined gaussian rank timeseries, we need to segment it in N sections. These sections can act as a structure for the storyboards and can be used for pacing, selecting which events to show and other actions. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1790,"value":"mutable N = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1941,"value":"md`*The number of segments is limited by the number of detectable peaks*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1743,"value":"md`### Peak-based Segmentation\nAn example of how we could split our data is by using peak based-segmentation.\nThe heighest peaks in the combined gaussian timeseries are chosen as the dividing lines.\nIn this example, the algorithm below it also tries to optimises for roughly equally sized segments.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1773,"value":"{\n const form = html``;\n form.onmouseup = () => {\n mutable N = form.range.value;\n };\n\n form.oninput = () => {\n form[\"seg-text\"].value = form.range.value;\n };\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1751,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2395,"value":"## Feature-Action Table\nThe last part of the process is using the feature-action table, written by the storyboard designer, in order to produce the behaviour of the story. The table will include what action to perform given a particular event or condition. Examples of actions might be animating the rise is cases, adding an annotation to highlight an area of interest and much more.\n\nPlease take a look at the provided examples at the top of this page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":488,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1149,"value":"md`### *Rising and falling segment detection functions*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1135,"value":"md`### *Peak detection and helper functions*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"/*\n Function to discover the start of a peak.\n We move backwards from the peak until the gradient stops being mostly negative.\n*/\nfindPeakStart = (peakIdx, norm) => {\n let deltas = [];\n\n let i = peakIdx;\n\n for (; i > peakIdx - 20 && i >= 0; i--) {\n deltas[i % 20] = norm[i - 1] - norm[i] < 0;\n }\n\n // Until line has a great majority of negative deltas keep incrementing i\n while (i >= 0 && deltas.reduce((sum, bool) => sum + bool) > 8) {\n deltas[i % 20] = norm[i - 1] - norm[i] < 0;\n i--;\n }\n\n // Extract line segment\n let segment = norm.slice(i, peakIdx);\n let minIdx = i + d3.minIndex(segment);\n\n return Math.max(Math.max(i, minIdx), 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"/*\n Function to discover the end of a peak.\n We move forwards from the peak until the gradient stops being mostly negative.\n*/\n\nfindPeakEnd = (peakIdx, norm) => {\n let deltas = [];\n\n let i = peakIdx;\n\n for (; i < peakIdx + 20 && i < norm.length; i++) {\n deltas[i % 20] = norm[i + 1] - norm[i] < 0;\n }\n\n // Until line has a great majority of negative deltas keep incrementing i\n while (i < norm.length && deltas.reduce((sum, bool) => sum + bool) > 8) {\n deltas[i % 20] = norm[i + 1] - norm[i] < 0;\n i++;\n }\n\n // Extract line segment\n let segment = norm.slice(peakIdx, i + 1);\n let minIdx = peakIdx + d3.minIndex(segment);\n\n return Math.min(Math.min(i, minIdx), norm.length - 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"/*\n Basic peak identification function.\n Given one normalised segemnt and the total data length.\n Returns the max height in the segment if a peak is detected.\n*/\n\ndetectPeakInSegment = (normSegment, totalDataLength) => {\n let segLen = normSegment.length;\n let grad = (normSegment[segLen - 1] - normSegment[0]) / (segLen - 1);\n let ratio = segLen / totalDataLength;\n\n let dists = normSegment.map((e, i) => e - (i * grad + normSegment[0]));\n let [min, max] = d3.extent(dists);\n let maxIdx = d3.maxIndex(normSegment);\n let distSum = dists.reduce((s, d) => d + s);\n\n let avg = d3.mean(normSegment)\n\n // Peak if most points are above line connecting endpoints and avg is greater than endpoint avg\n // let peak = max > ratio * 0.9 && min + max > 0\n let peak = distSum > ratio * 10 && Math.abs(grad) < 0.005;\n\n return peak && { maxIdx: maxIdx };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"md`### *Gaussian functions*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"gaussian = (mean, h, dataLen, w = -1) => {\n // Creates a gaussian distribution with mean, height and width parameters.\n // dataLen is used to size the return a vector to the same length as the timeseries data\n const std = w !== -1 ? w / 3 : (h * 8) / 3;\n const gaus_arr = [...Array(dataLen).fill(0)];\n for (let i = 0; i < dataLen; i++) {\n gaus_arr[i] = h * Math.exp(-((i - mean) ** 2) / (2 * std ** 2));\n }\n return gaus_arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"calcMaxBounds = (gaussians) => {\n // Calculates the line representing the max gaussian value at each point\n const dataLen = gaussians[0].length\n const maxResults = [...Array(dataLen).fill(0)]\n\n gaussians.forEach((g) => g.forEach((d,i)=>maxResults[i]= Math.max(maxResults[i],d)))\n return maxResults\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"combBounds = (bounds) => {\n // Combines ranked time series by averaging their bounds at each point\n const tsLength = bounds[0].length;\n const nBounds = bounds.length;\n const combination = [...Array(tsLength).fill(0)];\n bounds.forEach((env) =>\n env.forEach((d, i) => (combination[i] += d / nBounds))\n );\n return combination;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"combinedBounds = {\n const data = infectionRateByLocation[region];\n if (eventSelections.length) {\n const bounds = [dataBounds, semanticBounds].map((b) => b.map((d) => d.y));\n const comb = combBounds(bounds);\n return comb.map((d, i) => {\n return { date: data[i].date, y: d };\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1358,"value":"dataBounds = {\n const data = infectionRateByLocation[region];\n if (eventSelections.length) {\n return calcMaxBounds(dataGaussians.map((g) => g.map((d) => d.y))).map(\n (d, i) => {\n return { date: data[i].date, y: d };\n }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"dataGaussians = {\n const data = infectionRateByLocation[region];\n const smooth = gaussianSmoothTS(data, 3, smoothing);\n const measure = \"cases per day\";\n\n const table = new LookupTable(csvTableOutputs);\n\n let events = createEventsFromSelection(smooth, measure);\n let dataEvents = createEventsFromSelection(smooth, measure);\n\n const gaussians = dataEvents.map((e) => {\n let midIdx = dateToIdx(e._date, data);\n\n let gauss = gaussian(midIdx, e.rank, data.length);\n gauss = gauss.map((d, i) => {\n return { date: data[i].date, y: d };\n });\n return gauss;\n });\n\n return gaussians;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1364,"value":"semanticBounds = {\n const data = infectionRateByLocation[region];\n return calcMaxBounds(semanticGaussians.map((g) => g.map((d) => d.y))).map(\n (d, i) => {\n return { date: data[i].date, y: d };\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1303,"value":"semanticGaussians = {\n const data = infectionRateByLocation[region];\n const smooth = gaussianSmoothTS(data, 3, smoothing);\n const gaussians = (toggle ? random10SemanticEvents : semanticEvents).map(\n (e) => {\n // Get the indexes of the range of the points included in the data feature\n let idx = dateToIdx(new Date(e.date), data);\n let gauss = gaussian(idx, e.rank, data.length);\n gauss = gauss.map((d, i) => {\n return { date: data[i].date, y: d };\n });\n return gauss;\n }\n );\n return gaussians;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1883,"value":"md`### *Laplace functions*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1474,"value":"laplaceFilter = (data, size = 3, sd = 1) => {\n const filter = laplacianOfGaussian(size, sd);\n const halfWidth = (size - 1) / 2;\n const segment = data.slice(halfWidth, data.length - halfWidth);\n return segment.map((_, i) =>\n filter.reduce((res, v, j) => res + data[i + j] * v, 0)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1502,"value":"laplacianOfGaussian = (size, sd = 1) => {\n if (size % 2 == 0) throw \"LoG kernel size must be odd!\";\n\n const center = (size + 1) / 2;\n const filter = [...Array(size)].map((d, i) => {\n let x = i - center + 1;\n return (\n ((x ** 2 - sd ** 2) / sd ** 4) *\n Math.exp(-(x ** 2) / (2 * sd ** 2)) *\n 1.5 ** (x == 0)\n );\n });\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1889,"value":"md`### *Miscellaneous functions*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1196,"value":"// Color Scheme for coloring individual peaks\ngetColor = (_, n) => {\n const colorScheme = d3.schemeTableau10;\n return colorScheme[n % colorScheme.length];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1643,"value":"peakSegment = (peaks, dataLen, ignoreHeight = false) => {\n const optimumSegSize = dataLen / N;\n const peaksCpy = peaks.map((o) => {\n return { idx: o.peakIdx, h: o.normHeight };\n });\n const ordering = [];\n while (peaksCpy.length) {\n let bestPeak;\n peaksCpy.forEach((v1, idx) => {\n let closestDist = ordering.reduce(\n (closest, v2) => Math.min(closest, Math.abs(v1.idx - v2.idx)),\n Math.min(v1.idx, dataLen - v1.idx)\n );\n let score = (closestDist / dataLen) * (ignoreHeight || v1.h / 2);\n bestPeak =\n bestPeak && bestPeak.score > score\n ? bestPeak\n : { valley: v1, idx: idx, score: score };\n });\n peaksCpy.splice(bestPeak.idx, 1);\n ordering.push(bestPeak.valley);\n }\n return ordering;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"dateToIdx = (date, data) =>\n data.findIndex((d) => d.date.getTime() == date.getTime())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"import { Peak, Rise, Fall, LookupTable,csvTableOutputs } from \"569acc8ee36d5607\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1234,"value":"import { infectionRateByLocation } from \"f50fa0ae5d960435\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1240,"value":"import { countryRegions } from \"@scottwjones/lockdown-restriction-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"import {\n TimeSeries,\n GraphAnnotation,\n createDataGroup,\n meanSmoothTS,\n gaussianSmoothTS,\n normaliseTS\n} from \"@scottwjones/graphing-tools-v2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2053,"value":"import { AnnotatedTimeLine } from \"@scottwjones/annotatedtimeline\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"viewof smoothing = Inputs.range([1, 50], {\n label: \"Smoothing\",\n value: 11,\n step: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1922,"value":"viewof ignoreHeight1 = Inputs.toggle({ label: \"Ignore Peak Height\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2103,"value":"random10SemanticEvents = {\n return semanticEvents\n .sort(() => Math.random() - Math.random())\n .slice(0, 10)\n .sort((a, b) => a.date - b.date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2055,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"semanticEvents = FileAttachment(\n \"semantic_events - semantic_events (1).csv\"\n).csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"