2c:null 2d:["$","title",null,{"children":"Line Plot Animation | Tanya Shapiro | Observable"}] 32:[] 30:{"id":"a795f64bd1986404","slug":null,"title":"Line Plot Animation","thumbnail":"51c6cd12f8a6735698d62677765faf25e053b9d984e089bbcd981cecdc82ffa9","access_level":"public","create_time":"$D2024-02-23T23:47:15.098Z","update_time":"$D2024-03-07T02:46:30.230Z","view_time":null,"first_public_time":"$D2024-02-24T00:24:37.121Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024"},"version":323,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null}],"members":[{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Line Plot Animation","cells":[{"id":0,"value":"# Line Plot Animation\n\nHow to animate a line chart over time. Great use case to test out Mike Bostock's [Scrubber](https://observablehq.com/@mbostock/scrubber) input, super convenient! This test uses Apple Stock Price data, you can use this data set directly in Observable with aapl.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"viewof date = Scrubber(aapl.map(d=>d.Date), {\n autoplay: true,\n delay: delay,\n loop: false,\n format: date => date.toLocaleString(\"en\", {month: \"short\", day: \"numeric\", year:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"### Apple Stock Price Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"Plot.plot({\n y: {grid: true, domain: [0,maxClose], label:'Close ($)'},\n x: {domain: [startDate,endDate]},\n width: 1000,\n marks: [\n Plot.ruleY([0]),\n Plot.line(data, {x: \"Date\", y: \"Close\"}),\n Plot.dot(lastPoint, {x: \"Date\", y: \"Close\", r:5, fill:\"black\"}),\n Plot.text(lastPoint, {x: \"Date\", y: \"Close\", dy:-12, dx: 20, text: d=> '$' + d.Close.toFixed(2), fill:\"black\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"### Animate Lines One by One","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"viewof indexButton = Scrubber(testData.map(d=>d.row_num), {\n autoplay: true,\n delay: 40,\n loop: false,\n format: i => 'Year: ' + testData[i].year + ' Day ' + testData[i].index_by_year\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"Plot.plot({\n width:800,\n y: {grid:true, domain: [0,170]},\n x: {domain: [0,250], label: \"Day\"},\n color: {legend:true, domain: [\"2014\",\"2015\",\"2016\",\"2017\"]},\n marks: [\n Plot.ruleY([0]),\n //moving line\n Plot.line(testData.filter(d=>d.row_num<=indexButton),\n {x: \"index_by_year\", y: \"Close\", z: \"year\", stroke: \"year\"}),\n //dot per quarter\n Plot.dot(testData.filter(d=> d.row_num<=indexButton & d.is_quarter==='Y'), \n {x: \"index_by_year\", y: \"Close\", z: \"year\", fill: \"year\", r:6}),\n //dot tip with text\n Plot.dot(testData.filter(d=>d.row_num==indexButton), {x: \"index_by_year\", y: \"Close\", z: \"year\", fill: \"year\", r:6}),\n Plot.text(testData.filter(d=>d.row_num==indexButton), \n {x: \"index_by_year\", y: \"Close\", z: \"year\", fill: \"year\", text: d=>d.Close.toFixed(2), dx:20, dy:-10})\n\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"select \nDate\n,Close \n,date_part('year', Date)::char as year\n,row_number() over (order by Date) as row_num\n,row_number() over (partition by date_part('year', Date) order by Date) as index_by_year\n,date_part('month',Date) as month_num\n,case when row_number() over (partition by date_part('year', Date) order by Date) IN (60,120, 180,240) THEN 'Y' ELSE 'N' end is_quarter\nfrom stockData\nwhere date_part('year',Date)>=2014 and date_part('year',Date)<2018\norder by Date","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"testData","database":"var:stockData"},{"id":235,"value":"stockData = aapl","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"## Data Prep","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"Subset data with scrubber to show data for date and everything older than date. Create another data set for the last point in the data (used for our text marker).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"data = aapl.filter(d => d.Date <= date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"lastPoint = data.filter(d=>d.Date === date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Keep the y and x axis fixed by setting Plot domain to the min and max values for Date (x axis) and 0 to max Close Price (y axis).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"startDate = d3.min(aapl.map(d=>d.Date));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"endDate = d3.max(aapl.map(d=>d.Date));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"maxClose = d3.max(aapl.map(d=>d.Close))+10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"## Import Scrubber","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"## Some CSS for Flavor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"viewof delay = Inputs.range([0, 100], {label: \"Delay (miliseconds)\", step: 1, value: 25})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"