2d:null 2e:["$","title",null,{"children":"Animated Plot - Static Frame | azizcodes | Observable"}] 33:Ta0e,chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("path") .datum(series1) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("d", line); svg.append("path") .datum(series2) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) .attr("d", line); // pi svg.append("circle") .attr("cx",x(pi)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","blue") // pi/2 svg.append("circle") .attr("cx",x(pi/2)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","blue") // 3*pi/2 svg.append("circle") .attr("cx",x(3*pi/2)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","blue") // 2*pi svg.append("circle") .attr("cx",x(2*pi)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","blue") // pi svg.append("text") .text("\u03C0") .attr("x",x(pi)-5) .attr("y",.5*(margin.top+height-margin.bottom)-5) .attr("font-family","serif") .attr("font-size","18px") // pi/2 svg.append("text") .text("\u03C0/2") .attr("x",x(pi/2)-10) .attr("y",.5*(margin.top+height-margin.bottom)-5) .attr("font-family","serif") .attr("font-size","18px") // 3*pi/2 svg.append("text") .text("3\u03C0/2") .attr("x",x(3*pi/2)-15) .attr("y",.5*(margin.top+height-margin.bottom)-5) .attr("font-family","serif") .attr("font-size","18px") // 2*pi svg.append("text") .text("2\u03C0") .attr("x",x(2*pi)-10) .attr("y",.5*(margin.top+height-margin.bottom)-5) .attr("font-family","serif") .attr("font-size","18px") svg.append("line") .attr("x1", width-margin.left) //<<== change your code here .attr("y1", margin.top) .attr("x2", x(0)) //<<== and here .attr("y2", margin.top) .style("stroke-width", 1) .style("stroke", "grey") .style("fill", "none") .style("stroke-dasharray", ("3, 3")); svg.append("line") .attr("x1", width-margin.left) //<<== change your code here .attr("y1", height-margin.bottom) .attr("x2", x(0)) //<<== and here .attr("y2", height-margin.bottom) .style("stroke-width", 1) .style("stroke", "grey") .style("fill", "none") .style("stroke-dasharray", ("3, 3")); return svg.node(); };34:[] 31:{"id":"617b4ee0bba3ab6f","slug":"let-them-race","title":"Animated Plot - Static Frame","thumbnail":"825173e134ed07dbe4aff2aef5dbfb0e009d259af5145161b36441929f1da7d8","access_level":"public","create_time":"$D2020-03-30T19:38:18.257Z","update_time":"$D2020-04-25T22:05:53.915Z","view_time":null,"first_public_time":"$D2020-03-31T01:18:17.063Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"eef055af3c0ca5d2","login":"azizcodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/923bd556017e2db3f7a9c40502700b2ac65735cfddcbc3d344dee76c0206ffba","tier":"starter_2024"},"version":504,"publish_version":504,"role":null,"authored":false,"authors":[{"type":"individual","id":"225a9ec5baa09ccf","login":"azizcodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/923bd556017e2db3f7a9c40502700b2ac65735cfddcbc3d344dee76c0206ffba","tier":null}],"members":[{"type":"individual","id":"225a9ec5baa09ccf","login":"azizcodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/923bd556017e2db3f7a9c40502700b2ac65735cfddcbc3d344dee76c0206ffba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"1b458929e6dd3f4e","slug":"animations-public","title":"animations-public","owner":{"id":"eef055af3c0ca5d2","login":"azizcodes","name":""}},"type":"notebook","body":{"title":"Animated Plot - Static Frame","cells":[{"id":0,"value":"md`# Animated Plot - Static Frame`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`Press this button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof button = {\n const form = html`