29:null 2a:["$","title",null,{"children":"Scrollable Storyboard | Scott Jones | Observable"}] 2f:Tf31,annotations = { let annos = [{ start: 0, end: 0 }]; // Load data let cases = nationCases[region]; let deaths = nationDeaths[region]; // ------------- Death based events ------------- let firstDeath = false; let deathCount = 0; let deathDate, newDeaths; for (let i = 0; i < deaths.length; i++) { deathDate = deaths[i].date; newDeaths = deaths[i].y; deathCount += newDeaths; // Create Anno for first death if (!firstDeath && newDeaths > 0) { annos.push( writeText(`First death recorded in ${region}`, deathDate, cases) ); firstDeath = true; } // Create Anno for first 1k deaths if (deathCount >= 1000 && deathCount - newDeaths < 1000) { annos.push( writeText(`Deaths in ${region} exceed one thousand.`, deathDate, cases) ); } // Create Anno for first 20k deaths if (deathCount >= 20000 && deathCount - newDeaths < 20000) { annos.push( writeText(`Total of over 20,000 deaths in ${region}.`, deathDate, cases) ); } // Create Anno for first 50k deaths if (deathCount >= 50000 && deathCount - newDeaths < 50000) { annos.push( writeText(`50,000 total deaths in ${region}.`, deathDate, cases) ); } } // Create Anno for least deaths since jan 2021 let janIdx = findDateIdx(new Date("2021-01-01"), deaths); // Get beginning idx to start search let seg = deaths.slice(janIdx); // Find min deaths value let minDeaths = seg.reduce((min, curr) => (min.y < curr.y ? min : curr)); annos.push( writeText( `${minDeaths.y} deaths in ${region} - the least since January 2021.`, minDeaths.date, cases ) ); // ------------- Cases based events ------------- let casesCount = 0; let casesDate, newCases; for (let i = 0; i < cases.length; i++) { casesDate = cases[i].date; newCases = cases[i].y; casesCount += newCases; // Create Anno for first 50k cases if (casesCount >= 50000 && casesCount - newCases < 50000) { annos.push( writeText(`Cases in ${region} exceed fifty thousand.`, casesDate, cases) ); } // Create Anno for first 100k cases if (casesCount >= 100000 && casesCount - newCases < 100000) { annos.push( writeText( `Milestone of 100k total cases in ${region}.`, casesDate, cases ) ); } // Create Anno for first 1m cases if (casesCount >= 1000000 && casesCount - newCases < 1000000) { annos.push( writeText( `One million cases have been recorded in ${region} since the start of the pandemic.`, casesDate, cases ) ); } } // Create Anno for greatest weekly increase let maxIncrease = cases .slice(7) .reduce( (max, curr, i) => curr.y / cases[i].y > max.ratio && cases[i].y > 0 ? { ratio: curr.y / cases[i].y, max: curr } : max, { ratio: 1 } ); annos.push( writeText( `Compared to last week, today had ${Math.round( maxIncrease.ratio )}x more new cases.`, maxIncrease.max.date, cases ) ); // Create Anno for max cases let maxCases = cases.reduce((max, curr) => (max.y > curr.y ? max : curr)); annos.push( writeText( `This day had the largest recorded cases for ${region}, with ${maxCases.y} new cases.`, maxCases.date, cases ) ); // ------------- Calendar based events ------------- calendarEvents.forEach((e) => { if (findDateIdx(e._date, cases) !== -1) annos.push(writeText(e.description, e._date, cases)); }); annos.sort((a1, a2) => a1.end - a2.end); if (annos[annos.length - 1].end < cases.length - 1) annos.push({ end: cases.length - 1 }); annos.slice(1).forEach((anno, i) => (anno.start = annos[i].end)); return annos; }30:[{"id":"cf35350ac9e5ee6407745e0c6ea1cbdc7c78f10ac5b92ecae5f60386c77e9ce604f7127f7cb38aa805477872afdca4f58ba6a30848737851da4456200754afa6","href":"https://static.observableusercontent.com/files/cf35350ac9e5ee6407745e0c6ea1cbdc7c78f10ac5b92ecae5f60386c77e9ce604f7127f7cb38aa805477872afdca4f58ba6a30848737851da4456200754afa6","name":"semantic_events@3.csv","type":"text/csv","lastModified":1699451628594.612,"size":2512},{"id":"6a4144cabb8da430956b06d0263b46de8ecaf51a40b38d8cca99431f2b6ef4d708a1d0af2ecd749b71a0be1f4ae43a2f9088c9ca20968107e119895e45d90c17","href":"https://static.observableusercontent.com/files/6a4144cabb8da430956b06d0263b46de8ecaf51a40b38d8cca99431f2b6ef4d708a1d0af2ecd749b71a0be1f4ae43a2f9088c9ca20968107e119895e45d90c17","name":"uk_daily_cases.csv","type":"text/csv","lastModified":1699451628594.612,"size":38296},{"id":"e8a78eb3c02a5e5429e56502b591539f9a8759ec203624f7b742dabab78281f9968661e55ebe199c7307ce529f028e61f26477b2a419cb174309f464018b3c31","href":"https://static.observableusercontent.com/files/e8a78eb3c02a5e5429e56502b591539f9a8759ec203624f7b742dabab78281f9968661e55ebe199c7307ce529f028e61f26477b2a419cb174309f464018b3c31","name":"nation_deaths.csv","type":"text/csv","lastModified":1699451628594.612,"size":116955},{"id":"eb81b1700458ac3b563903026431ab417679a3057a088e41e213e6f333a58e192d1d1525fedb0099fcba76850ba05e91d01a661d30453e4e4d637e0c8e445ea8","href":"https://static.observableusercontent.com/files/eb81b1700458ac3b563903026431ab417679a3057a088e41e213e6f333a58e192d1d1525fedb0099fcba76850ba05e91d01a661d30453e4e4d637e0c8e445ea8","name":"nation_cases.csv","type":"text/csv","lastModified":1699451628594.612,"size":124985}] 2d:{"id":"1f3203c332533761","slug":null,"title":"Scrollable Storyboard","thumbnail":"156e95b01da89223695b433f7381af6ac051eab8c710c7518160d4d572e62231","access_level":"public","create_time":"$D2023-11-08T13:53:48.594Z","update_time":"$D2023-11-08T14:59:31.296Z","view_time":null,"first_public_time":"$D2023-11-08T13:53:48.594Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"6e652efefd6b4de4","login":"scottwjones","name":"Scott Jones","avatar_url":"https://avatars-next.observableusercontent.com/76d7ecc64e987d577d6b367141650592362af5ed7cfc46d49f2896a455f9ec33","tier":"starter_2024"},"version":271,"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":2,"collection":null,"type":"notebook","body":{"title":"Scrollable Storyboard","cells":[{"id":0,"value":"md`# Scrollable Storyboard\nBelow is an implementation of the \"Comparative Storyboard\".\n\nScroll horizontally to progress the story further. In this example, events are not ranked by importance.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`### Semantic Events\nFor each country we have a csv containing semantic events which have been gathered from various sources using both manual and automated methods (webscraping). An example of such event would be \"Schools have reopened\" or \"The third major Lockdown has commenced\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"semanticCSV = FileAttachment(\"semantic_events@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"calendarEvents = {\n const lockdownEvents = getCalendarEvents(region, [\n SemanticEvent.TYPES.LOCKDOWN_START,\n SemanticEvent.TYPES.LOCKDOWN_END\n ]);\n\n // Convert csv to Event Objects\n const semanticEvents = semanticCSV.map((e) =>\n new SemanticEvent(new Date(e.date)).setDescription(e.text)\n );\n\n return lockdownEvents.concat(semanticEvents);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"md`### Data selection\nThe data used in this visualisation is as follows:\n * Nation Cases data\n * Nation Death data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`### Data Events\nData events are then extracted from the timeseries data above. These include:\n\n * First death\n * Death milestones: 1k, 20k, 50k\n * Cases milestones: 50k, 100k, 1m\n * Cases double over a week\n * Low deaths since Jan 2021\n * Max daily cases\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"md`### Annotations\nThe Semantic and extracted Data events are then combined together in chronological order to then be shown in the story.\nThe difference between this storyboard and others is that the events are not pruned down based on rank using the gaussian mixture models.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"md`### Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof region = Inputs.select(\n [\"England\", \"Wales\", \"Scotland\", \"Northern Ireland\"],\n { label: \"Select nation\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"// scrollSvg acts as an input\nviewof scrollSvg = scrollingSvg(annotations.slice(1), 900, 600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"{\n const casesData = nationCases[region];\n const ts = new TimeSeries(casesData)\n .svg(scrollSvg.graphSvg)\n .yLabel(\"New cases by publish date\")\n .border(70);\n const tl = new TimeLine(casesData).svg(scrollSvg.timelineSvg);\n d3.select(scrollSvg.graphSvg).selectAll(\"*\").remove();\n d3.select(scrollSvg.timelineSvg).selectAll(\"*\").remove();\n tl.annotations(annotations).plot(scrollSvg.event);\n ts.animate(annotations, scrollSvg.event).plot();\n\n return; // html`Logic for the graph animation`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"writeText = (text, date, data) => {\n // Find idx of event in data and set location of the annotation in opposite half of graph\n const idx = findDateIdx(date, data);\n\n return { end: idx, date: date.toDateString().slice(4), description: text };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"import {\n scrollingSvg,\n TimeLine,\n style\n} from \"@scottwjones/scrollytelling-time-series\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"import { findDateIdx } from \"@scottwjones/ranked-time-series-aggregation-and-segmentation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"import { getCalendarEvents } from \"@scottwjones/lockdown-restriction-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"import { SemanticEvent } from \"@scottwjones/event-classes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"ukCasesData = (await FileAttachment(\"uk_daily_cases.csv\").csv()).map((row) => {\n return { date: new Date(row.date), y: +row.newCasesByPublishDate };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"nationDeaths = {\n let csv = await FileAttachment(\"nation_deaths.csv\").csv();\n let deathsObj = {};\n csv.forEach((d) => {\n if (!deathsObj[d.areaName]) {\n deathsObj[d.areaName] = [];\n }\n deathsObj[d.areaName].push({\n date: new Date(d.date),\n y: +d.newDeaths28DaysByDeathDate\n });\n });\n\n for (let nation in deathsObj) {\n deathsObj[nation].sort((r1, r2) => r1.date - r2.date);\n }\n return deathsObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"nationCases = {\n let csv = await FileAttachment(\"nation_cases.csv\").csv();\n let casesObj = {};\n csv.forEach((d) => {\n if (!casesObj[d.areaName]) {\n casesObj[d.areaName] = [];\n }\n casesObj[d.areaName].push({\n date: new Date(d.date),\n y: +d.newCasesByPublishDate\n });\n });\n\n for (let nation in casesObj) {\n casesObj[nation].sort((r1, r2) => r1.date - r2.date);\n }\n return casesObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"import {\n TimeSeries,\n GraphAnnotation,\n createDataGroup\n} from \"@scottwjones/graphing-tools-v2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"