3f:null 40:["$","title",null,{"children":"Experiments in Scrollytelling - Part 2 | ClaraPT's Workspace | Observable"}] 46:T49b,chart = { // Declare the chart dimensions and margins. const width = 800; const height = 500; const margin = { top: 20, bottom:50, right: 20, left:60 }; // computed in R const minCount = 6250; const maxCount = 357071; // create the svg and canvas area const svg = d3.create("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create the scales const x = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([0, width]); const y = d3.scaleLinear() .domain([minCount, maxCount]) .range([height, 0]); // add axes g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); g.append("g") .call(d3.axisLeft(y)); // line generator and add line const line = d3.line() .x(d => x(d.year)) .y(d => y(d.count)); g.append("g") .append("path") .datum(data) .attr("d", line) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", "2px"); return svg.node(); }47:T19b2,section01 = ({ /** The id of the

that will hold this and all other sections */ appContainerId: 'myApp', /** identifier used to delineate different sections. Should be unique from other sections * identifiers */ sectionIdentifier: 'section01', /** narration can be either of the following 3 options: * 1) a string representing an absolute file path to a file of the following types: * 'csv', 'tsv', 'json', 'html', 'txt', 'xml', which will be parsed by d3.promise * 2) array of narration objects, * 3) a promise to return an array of narration objects in the appropriate form * See README for the specfication of the narration objects */ narration: 'demo_app/exampleSection1/data/narrationExampleSection1.csv', /** narration as array example */ // narration: [ {}, ], /** narration as promise example */ // narration: d3.csv('demo_app/exampleSection1/data/narrationExampleSection1.csv'), /** data can be either of the following 4 options: * 1) a string representing an absolute file path to a file of the following types: * 'csv', 'tsv', 'json', 'html', 'txt', 'xml', which will be parsed by d3.promise * 2) array of data objects * 3) a promise to return an array of narration objects in the appropriate form * 4) undefined */ data: 'demo_app/exampleSection1/data/dataBySeries.csv', /** data as array example */ // data: [ {}, ], /** data as promise example */ // data: d3.csv('demo_app/exampleSection1/data/dataBySeries.csv'), /** optional function to reshape data after queries or parsing from a file * sectionConfig.data will be overwritten by this data array */ // reshapeDataFunction(data) { /** return reshaped data array to overwrite data */ }, /** * Called AFTER data is fetched, and reshapeDataFunction is called. This method should * build the graph and return an instance of that graph, which will passed as arguments * to the onScrollFunction and onActivateNarration functions. * * This function is called as follows: * buildGraphFunction(graphId, sectionConfig) * @param {string} graphId - id of the graph in this section. const myGraph = d3.select(`#${graphId}`); * @param {object} sectionConfig - the configuration object passed to ScrollyTeller * @param {object} [sectionConfig] - the configuration object passed to ScrollyTeller * @param {string} [sectionConfig.sectionIdentifier] - the identifier for this section * @param {object} [sectionConfig.graph] - the chart instance, or a reference containing the result of the buildChart() function above * @param {object} [sectionConfig.data] - the data that was passed in or resolved by the promise and processed by reshapeDataFunction() * @param {object} [sectionConfig.scroller] - the scrollama object that handles activation of narration, etc * @param {object} [sectionConfig.cssNames] - the CSSNames object containing some useful functions for getting the css identifiers of narrations, graph, and the section * @returns {object} - chart instance */ buildGraphFunction(graphId, sectionConfig) { chart; }, /** * Called upon scrolling of the section. See argument list below, this function is called as: * onActivateNarration({ index, progress, element, trigger, graphId, sectionConfig }) * @param {object} [params] - object containing parameters * @param {number} [params.index] - index of the active narration object * @param {number} [params.progress] - 0-1 (sort of) value indicating progress through the active narration block * @param {HTMLElement} [params.element] - the narration block DOM element that is currently active * @param {string} [params.trigger] - the trigger attribute for narration block that is currently active * @param {string} [params.graphId] - id of the graph in this section. const myGraph = d3.select(`#${graphId}`); * @param {object} [params.sectionConfig] - the configuration object passed to ScrollyTeller * @param {string} [params.sectionConfig.sectionIdentifier] - the identifier for this section * @param {object} [params.sectionConfig.graph] - the chart instance, or a reference containing the result of the buildChart() function above * @param {object} [params.sectionConfig.data] - the data that was passed in or resolved by the promise and processed by reshapeDataFunction() * @param {object} [params.sectionConfig.scroller] - the scrollama object that handles activation of narration, etc * @param {object} [params.sectionConfig.cssNames] - the CSSNames object containing some useful functions for getting the css identifiers of narrations, graph, and the section * @returns {void} */ onScrollFunction({ index, progress, element, trigger, graphId, sectionConfig }) {}, /** * Called when a narration block is activated. * See argument list below, this function is called as: * onActivateNarration({ index, progress, element, trigger, graphId, sectionConfig }) * @param {object} [params] - object containing parameters * @param {number} [params.index] - index of the active narration object * @param {number} [params.progress] - 0-1 (sort of) value indicating progress through the active narration block * @param {HTMLElement} [params.element] - the narration block DOM element that is currently active * @param {string} [params.trigger] - the trigger attribute for narration block that is currently active * @param {string} [params.direction] - the direction the event happened in (up or down) * @param {string} [params.graphId] - id of the graph in this section. const myGraph = d3.select(`#${graphId}`); * @param {object} [params.sectionConfig] - the configuration object passed to ScrollyTeller * @param {string} [params.sectionConfig.sectionIdentifier] - the identifier for this section * @param {object} [params.sectionConfig.graph] - the chart instance, or a reference containing the result of the buildChart() function above * @param {object} [params.sectionConfig.data] - the data that was passed in or resolved by the promise and processed by reshapeDataFunction() * @param {object} [params.sectionConfig.scroller] - the scrollama object that handles activation of narration, etc * @param {object} [params.sectionConfig.cssNames] - the CSSNames object containing some useful functions for getting the css identifiers of narrations, graph, and the section * @returns {void} */ onActivateNarrationFunction({ index, progress, trigger, direction, graphId, sectionConfig }) {}, });48:[{"id":"432f720a1be02664fc9fccc3c03f954308a8bb59ff4dbc80592d026e608ead4b37e78d6a77bfbfda03725fc707d4b9aad1aa8795828b1d0c2db64b45ed3994d5","href":"https://static.observableusercontent.com/files/432f720a1be02664fc9fccc3c03f954308a8bb59ff4dbc80592d026e608ead4b37e78d6a77bfbfda03725fc707d4b9aad1aa8795828b1d0c2db64b45ed3994d5","name":"biodiversityYearCounts.csv","type":"text/csv","lastModified":1707351598905.505,"size":1513}] 44:{"id":"4b5efd013ba74640","slug":"experiments-in-scrollytelling-part-2","title":"Experiments in Scrollytelling - Part 2","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-02-05T02:55:46.078Z","update_time":"$D2024-02-25T00:27:04.119Z","view_time":null,"first_public_time":"$D2024-02-05T02:55:46.078Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","bio":"","following":false},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"role":"editor"},{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c3092cc076c029d0","slug":"ecoassets-visualisations","title":"EcoAssets visualisations","owner":{"id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"Experiments in Scrollytelling - Part 2","cells":[{"id":0,"value":"# Experiments in Scrollytelling - Part 2\n\nAn attempt to create my own simple scrollytelling example using the ScrollyTeller.js library. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":" ## First, load the ScrollyTeller library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"scrollyteller = require('@ihmeuw/scrollyteller@1.0.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## 2. Chart rendering code using d3.js\n\nJavascript (class) to render a chart\n\n**The plan**: A line chart of number of observations vs year--> may or may not be multiple lines, one for each data provider/organisation\n\nSome helpful notebooks:\n* https://observablehq.com/@d3/d3-line\n* https://observablehq.com/@d3/line-chart/2\n* https://observablehq.com/@d3/line-with-tooltip/2\n* https://observablehq.com/@d3/learn-d3-animation\n* https://observablehq.com/@d3/variable-color-line\n* https://observablehq.com/@d3/learn-d3-interaction\n* https://observablehq.com/@d3/multi-line-chart/2\n* https://observablehq.com/@dreamendstate/slider-chart-experiment\n* https://observablehq.com/@datavisufs/line-chart\n* https://observablehq.com/@dergroncki/line-chart-with-tooltip\n* https://observablehq.com/@mbostock/scrubber#Scrubber\n* https://observablehq.com/@mbostock/bar-chart-race-with-scrubber","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"d3.extent(data, d => d.count)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"d3.min(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"### A different approach:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"viewof replay2 = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"{\n replay2; // reference the button so this cell re-runs on click\n for (let i = 0, n = 300; i < n; ++i) {\n yield i;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"linegraph = {\n replay2; // reference the button so this cell re-runs on click\n\n const path = htl.svg``;\n\n const chart = htl.html``;\n\n for (let i = 0, n = 300; i < n; ++i) {\n const t = (i + 1) / n;\n path.setAttribute(\"stroke-dasharray\", `${t * lineLength},${lineLength}`);\n yield chart;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof t = Scrubber(d3.ticks(0, 1, 200), {\n autoplay: false,\n loop: false,\n initial: 0,\n format: x => `t = ${x.toFixed(3)}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"lineLength = htl.svg``.getTotalLength()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"line = d3.line().x(d => x(d.year)).y(d => y(d.count));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.year))\n .range([0, width]);\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"y = d3.scaleLinear()\n .domain([minCount, maxCount])\n .range([height, 0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"xAxis = (g, scale = x) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"yAxis = (g, scale = y) => g\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .call(d3.axisLeft(scale).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"height = 500; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"margin = ({ top: 20, bottom: 50, right: 20, left:60 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"minCount = 6250;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"maxCount = 357071;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"dataTyped = data.map(({ year, count }) => ({\n year: new Date(year, 0, 1),\n count\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## 3. Chart Data \n\nInput data required to render chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"data = FileAttachment(\"biodiversityYearCounts.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## 4. Narration data\n\nInput text narration as a csv, including triggers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"## 5. Create Section Config object\n\nStory config object example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"exampleSectionConfigObject = ({ // Section Config object\n sectionIdentifier: 'wealthAndHealth',\n \n // 1) DATA PATHS/PROMISES \n narration: 'path/to/narration.csv',\n data: 'path/to/wealthAndHealthData.json',\n \n // 2) FIRST RENDER\n reshapeDataFunction: function (data) {},\n buildGraphFunction: function (graphId, { data }) {},\n \n // 3) ON USER EVENTS\n onActivateNarrationFunction: function () {},\n onScrollFunction: function () {},\n onResizeFunction: function () {},\n \n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## 6. Create Story Config object\n\nStory config objects require:\n- appContainerId\n- cssNames\n- sectionList","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"exampleStoryConfig = ({\n /** The id of the

that will hold this and all other sections */\n appContainerId: 'myApp',\n /** can override the defaults in this class to customize CSS */\n // cssNames: new CSSNames(),\n /** build an array of story sections.\n * Each section constructor should return a valid configuration,\n * or create a new section \"object\" outside, and add a .config() function\n * that returns a valid configuration object */\n sectionList: [section01],\n /** another section object like the one above can be added here... */\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// storyInstance = scrollyteller.default(storyConfig)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## 7. Render story config object as a story instance","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"