2f:[] 2d:{"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"},{"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"},{"id":214,"value":"### Apple Stock Price Over Time","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":283,"value":"### Animate Lines One by One","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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","output":"testData","database":"var:stockData"},{"id":235,"value":"stockData = aapl","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"## Data Prep","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":120,"value":"data = aapl.filter(d => d.Date <= date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"lastPoint = data.filter(d=>d.Date === date)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":24,"value":"startDate = d3.min(aapl.map(d=>d.Date));","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"endDate = d3.max(aapl.map(d=>d.Date));","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"maxClose = d3.max(aapl.map(d=>d.Close))+10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"## Import Scrubber","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"## Some CSS for Flavor","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"viewof delay = Inputs.range([0, 100], {label: \"Delay (miliseconds)\", step: 1, value: 25})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}