2b:null 2c:["$","title",null,{"children":"Learn D3: Animation | noam honig | Observable"}] 31:T416,chartBug = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const zx = x.copy(); // x, but with a new domain. const zy = y.copy(); // x, but with a new domain. const line = d3 .line() .x(d => zx(d.date)) .y(d => y(d.close)); const path = svg .append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data)); const gx = svg.append("g").call(xAxis, zx); const gy = svg.append("g").call(yAxis, y); return Object.assign(svg.node(), { update(step) { const partialData = []; for (let i = 0; i < step; i++) { partialData.push(data[i]); } const t = svg.transition().duration(50); zx.domain(d3.extent(partialData, d => d.date)); gx.transition(t).call(xAxis, zx); zy.domain([0, d3.max(partialData, d => d.close)]); gy.transition(t).call(yAxis, zy); path.transition(t).attr("d", line(data)); return t.end(); } }); }32:T55d,viewof timeframe = { const form = html``; form.onchange = () => form.dispatchEvent(new CustomEvent("input")); // Safari form.oninput = event => { switch (form.radio.value) { case "2009": form.value = [new Date("2009-01-01"), new Date("2010-01-01")]; break; case "2010": form.value = [new Date("2010-01-01"), new Date("2011-01-01")]; break; case "2011": form.value = [new Date("2011-01-01"), new Date("2012-01-01")]; break; default: form.value = d3.extent(data, d => d.date); break; } }; form.oninput(); return form; }33:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1606543151693.286,"size":48822}] 2f:{"id":"0c4abffa4a783425","slug":null,"title":"Learn D3: Animation","thumbnail":"0a7f593d0903d3e0227ee20a870a2cf45602d83f5ce71e465421e07e0fb838cf","access_level":"unlisted","create_time":"$D2020-11-28T05:59:11.693Z","update_time":"$D2020-11-29T08:36:28.159Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"de13bdb9fdabe52a","slug":"learn-d3-animation","title":"Learn D3: Animation","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"84a6f73bded39235","login":"noamhonig","name":"noam honig","avatar_url":"https://avatars-next.observableusercontent.com/3fcf08ffbe96c25d17c4f2a80a8fafccf7edef0bd56466aee9bef0c4f02affd7","tier":"starter_2024","bio":""},"version":1508,"publish_version":1508,"role":null,"authored":false,"authors":[{"type":"individual","id":"e62290cc630092b1","login":"noamhonig","name":"noam honig","avatar_url":"https://avatars-next.observableusercontent.com/3fcf08ffbe96c25d17c4f2a80a8fafccf7edef0bd56466aee9bef0c4f02affd7","tier":null,"bio":""}],"members":[{"type":"individual","id":"e62290cc630092b1","login":"noamhonig","name":"noam honig","avatar_url":"https://avatars-next.observableusercontent.com/3fcf08ffbe96c25d17c4f2a80a8fafccf7edef0bd56466aee9bef0c4f02affd7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Animation","cells":[{"id":168,"value":"md`# Learn D3: Animation\n\nUnlike graphics drawn on paper, computer graphics needn’t be static; like Frankenstein’s monster, they can come alive through animation! ✨`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"md`## demo running chart bug\n\nI've forked the [Learn D3: Animation](https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3) page and tried to create a chart that will animate both the x axis and y axis, and not just the line itself.\n\nIt all works great but I have one problem:\n\n**The vertical line of the Y axis keep flickering**\n\nCan you help me figure out why?\n\nI think it is somehow related to the: await chartBug.update(step) call\nwithout the await it doesn't flicker, but it doesn't wait for the transition to end.\n\nWhile I'm here, I have another newby question - how can I get the axis to always tick the start and end?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"{\n replay2;\n for (let i = 0, n = data.length; i < n; ++i) {\n chartBug.update(i);\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof replay = html`