2b:null 2c:["$","title",null,{"children":"test slider | laurent smeets | Observable"}] 31:Ta3b,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }32:T5ec,data = FileAttachment("price (14).csv").csv().then(data => { // Iterates over the dataset and converts the 'Month' field to a JavaScript Date object // and converts the 'prices' field to a numeric datatype data.forEach(d => { const year = d.Month.slice(0, 4); const month = d.Month.slice(5, 7); d.Date = new Date(`${year}-${month}-01`); d["prices"] = +d["prices"]; }); data = data.filter(d => !isNaN(d["prices"])); // Filter out entries with missing 'prices' values // Sort data by Date and disaggregation data.sort((a, b) => d3.ascending(a.Date, b.Date) || d3.ascending(a.disaggregation, b.disaggregation)); // Initialize previousPrices dictionary let previousPrices = {}; // Initialize previousPrices values for each unique disaggregation const uniqueDisaggregations = [...new Set(data.map(d => d.disaggregation))]; uniqueDisaggregations.forEach(disaggregation => { previousPrices[disaggregation] = null; }); // Compute percentage changes within each disaggregation for (let i = 0; i < data.length; i++) { if (previousPrices[data[i].disaggregation] !== null) { data[i].percentageChange = roundToTwoDecimal(((data[i].prices / previousPrices[data[i].disaggregation]) - 1) * 100); } else { data[i].percentageChange = 0; // or you can set any other default value } previousPrices[data[i].disaggregation] = data[i].prices; } return data; }); 33:Tde2,{ const bisector = d3.bisector((i) => data[i].Date); const basis = (I, Y) => Y[I[bisector.center(I, dateslider)]]; const formatDate = (date) => { const currentMonth = d3.timeFormat("%b %Y")(date); const previousMonth = d3.timeFormat("%b %Y")(getPreviousMonth(date)); return `${previousMonth} - ${currentMonth}`; }; let relevantGoldPriceData = data.filter(d => d.disaggregation === "GOLD_PRICE" && +d.Date === +dateslider); let relevantOilPriceData = data.filter(d => d.disaggregation === "OIL_PRICE" && +d.Date === +dateslider); let relevantCocoaPriceData = data.filter(d => d.disaggregation === "COCOA_PRICE" && +d.Date === +dateslider); // Plot the data return Plot.plot({ marginTop: 20, style: "overflow: visible; fontFamily: 'Lato'", y: { type: "log", grid: true, label: "Change in price (%)", tickFormat: ((f) => (x) => f((x - 1) * 100))(d3.format("+d")) }, marks: [ Plot.ruleY([1]), Plot.ruleX([dateslider]), Plot.lineY(data, Plot.normalizeY(basis, { x: "Date", y: "prices", stroke: "disaggregation" })), // in your plot config Plot.text(data, Plot.selectLast(Plot.normalizeY(basis, { x: "Date", y: "prices", z: "disaggregation", text: (d, i) => { const change = getPercentageChangeForDate(data, d.disaggregation, dateslider); const arrow = change > 0 ? "↑" : (change < 0 ? "↓" : ""); return `(${d.disaggregation}) ${formatDate(dateslider)} ${arrow} (${change}%)`; }, fill: d => getPercentageChangeForDate(data, d.disaggregation, dateslider) > 0 ? "green" : "red", textAnchor: "start", dx: 3, }))), Plot.text(relevantGoldPriceData, { px: d3.max(data, d => d.Date), py: 6, dy: -30, textAnchor: "end", frameAnchor: "top-right", fontVariant: "tabular-nums", text: (d) => { const change = d.percentageChange; const arrow = change > 0 ? "↑" : (change < 0 ? "↓" : ""); return [ `${d.disaggregation} in ${formatDate(dateslider)}`, ` ${arrow} (${change}%)`, `(price: ${d.prices.toFixed(2)} per ounce in US$) ` ].join(" "); }, fill: d => d.percentageChange > 0 ? "green" : "red" }), Plot.text(relevantOilPriceData, { px: d3.max(data, d => d.Date), py: 6, dy: -20, textAnchor: "end", frameAnchor: "top-right", fontVariant: "tabular-nums", text: (d) => { const change = d.percentageChange; const arrow = change > 0 ? "↑" : (change < 0 ? "↓" : ""); return [ `${d.disaggregation} in ${formatDate(dateslider)}`, ` ${arrow} (${change}%)`, `(price: ${d.prices.toFixed(2)} per barrel in US$) ` ].join(" "); }, fill: d => d.percentageChange > 0 ? "green" : "red" }), Plot.text(relevantCocoaPriceData, { px: d3.max(data, d => d.Date), py: 6, dy: -10, textAnchor: "end", frameAnchor: "top-right", fontVariant: "tabular-nums", text: (d) => { const change = d.percentageChange; const arrow = change > 0 ? "↑" : (change < 0 ? "↓" : ""); return [ `${d.disaggregation} in ${formatDate(dateslider)}`, ` ${arrow} (${change}%)`, `(price: ${d.prices.toFixed(2)} per tonne in US$) ` ].join(" "); }, fill: d => d.percentageChange > 0 ? "green" : "red" }) ] }); }34:[{"id":"2522cb52eccfa26a9f1d2a71d96626dfb839f3469f2439e2afc8caa258886bc0b2f1fa13f245959b7a83db5365803735f86ba627b6fa607280e444fa9b4b9185","href":"https://static.observableusercontent.com/files/2522cb52eccfa26a9f1d2a71d96626dfb839f3469f2439e2afc8caa258886bc0b2f1fa13f245959b7a83db5365803735f86ba627b6fa607280e444fa9b4b9185","name":"price (14).csv","type":"text/csv","lastModified":1694881100293.372,"size":25272}] 2f:{"id":"7f3f32060422afbb","slug":null,"title":"test slider","thumbnail":"313f2a1e13d8508ab73ef456730e2195f4fdba29f4c00cca910cf2e05edde0a6","access_level":"public","create_time":"$D2023-09-16T16:17:50.176Z","update_time":"$D2023-09-17T10:15:16.903Z","view_time":null,"first_public_time":"$D2023-09-16T16:17:50.176Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7768f36d98059510","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":"starter_2024"},"version":162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99aa938c47f23050","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":null}],"members":[{"type":"individual","id":"99aa938c47f23050","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"test slider","cells":[{"id":0,"value":"# test slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function roundToTwoDecimal(value) {\n return Math.round(value * 100) / 100;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// Function to get the previous month of a given date\nfunction getPreviousMonth(date) {\n let newDate = new Date(date);\n newDate.setMonth(date.getMonth() - 1);\n return newDate;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function getPercentageChangeForDate(data, disaggregation, date) {\n let record = data.find(d => d.disaggregation === disaggregation && +d.Date === +date);\n return record ? roundToTwoDecimal(record.percentageChange) : null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"// Function to get label position based on disaggregation\nfunction getLabelYPosition(disaggregation) {\n switch(disaggregation) {\n case \"GOLD_PRICE\": return 1.2; // Adjust based on your requirements\n case \"OIL_PRICE\": return 1.4; // Adjust based on your requirements\n case \"COCOA_PRICE\": return 1.6; // Adjust based on your requirements\n default: return 0;\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof dateslider = Scrubber(data.map((d) => d.Date), {\n format: Plot.formatIsoDate,\n initial: 1,\n loop: false,\n autoplay: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function getEndDataPoints(data, dateslider) {\n return data.filter(d => +d.Date === +dateslider);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"