31:T7de,style = html``32:[{"id":"c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","href":"https://static.observableusercontent.com/files/c9c5fb51d31fccdbe01f25a3571dec598e255d3c15e47624f38dfd75c90c6b8a00b1f47ad6fbbfd460765cfcf036832a829371135412a38db71e921da0d75fce","name":"aapl.csv","type":"text/csv","lastModified":1638949013483.241,"size":22707}] 2f:{"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"},{"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"},{"id":576,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":635,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":536,"value":"d3.extent(data, d => d.close)","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":419,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"data = d3.csvParse(await FileAttachment(\"aapl.csv\").text(), ({date, close}) => ({date: parseDate(date), close: +close}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"data_raw = d3.tsvParse(await FileAttachment(\"aapl.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"formatDate = d3.timeFormat(\"%b %y\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}