25:["$","title",null,{"children":"ANIMATED LINE CHART | Ford Johnson | Observable"}] 49:T7de,style = html``4a:[{"id":"c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","href":"https://static.observableusercontent.com/files/c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","name":"aapl.csv","type":"text/csv","lastModified":1692321787821.344,"size":22707}] 29:{"id":"eb1844c771ba54b8","slug":null,"title":"ANIMATED LINE CHART","thumbnail":"f2f8c7d8b7b485f2011b069fce6504235d891dcee50c230baacc9553e79afc14","access_level":"public","create_time":"$D2023-08-18T01:23:07.821Z","update_time":"$D2023-08-18T01:23:07.821Z","view_time":null,"first_public_time":"$D2023-08-18T01:23:07.821Z","has_unpublished_edits":null,"fork":{"id":"2ed0dcddd0e3dbfc","slug":"animated-line-chart","title":"ANIMATED LINE CHART","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"359c978afcb2bfc7","login":"bradfordjohnson","name":"Ford Johnson","avatar_url":"https://avatars-next.observableusercontent.com/84b84ae9d388a4ee2f161b86e6d14a038818679ab572b195e256b123a7555026","tier":"free_2026","bio":"Data Analyst","following":false},"version":670,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"db0515f0b74f4453","login":"bradfordjohnson","name":"Ford Johnson","avatar_url":"https://avatars-next.observableusercontent.com/731a7f6cd4d9429a3855c9fd571c0cac81626b28c7d3ed2bc07eab7523607892","tier":null,"bio":"Data Analyst | Visualization Designer","following":false}],"members":[{"type":"team","id":"359c978afcb2bfc7","login":"bradfordjohnson","name":"Ford Johnson","avatar_url":"https://avatars-next.observableusercontent.com/84b84ae9d388a4ee2f161b86e6d14a038818679ab572b195e256b123a7555026","tier":"free_2026","role":"editor"},{"type":"individual","id":"db0515f0b74f4453","login":"bradfordjohnson","name":"Ford Johnson","avatar_url":"https://avatars-next.observableusercontent.com/731a7f6cd4d9429a3855c9fd571c0cac81626b28c7d3ed2bc07eab7523607892","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ANIMATED LINE CHART","cells":[{"id":167,"value":"# ANIMATED LINE CHART\n\nWe are going to use the stroke-dasharray to create this animation. The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape. Let's have a look at a simple HTML example first. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"If the stroke-dasharray is only defined by one number, the size of the *dashs* and the *gaps* will be the same. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":650,"value":"If the first number is constant the *width* of dash will be always the same and the only element that is changing are the *gaps*. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"## Animated D3 Line chart\nThis time-series line chart shows the daily close of Apple stock. Data: [Yahoo Finance](https://finance.yahoo.com/lookup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"chart = { \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\")\n .datum(data)\n .attr(\"class\", \"line\")\n .attr(\"d\", line) \n .transition()\n .duration(5000)\n .ease(d3.easeLinear)\n .attrTween(\"stroke-dasharray\", function() {\n const length = this.getTotalLength();\n return d3.interpolate(`0,${length}`, `${length},${length}`);\n });\n \n \n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"g\")\n .call(xAxis);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.close)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"d3.extent(data, d => d.close)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\",\"y-axis\")\n .call(d3.axisLeft(y)\n .tickValues([100, 200, 400, 300, 500, 600])\n .tickSize(-width))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\",\"x-axis\")\n .call(d3.axisBottom(x)\n .tickFormat(formatDate)\n .ticks(10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"line = d3.line()\n .defined(d => d.close > 0)\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"data = d3.csvParse(await FileAttachment(\"aapl.csv\").text(), ({date, close}) => ({date: parseDate(date), close: +close}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"data_raw = d3.tsvParse(await FileAttachment(\"aapl.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"formatDate = d3.timeFormat(\"%b %y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null