2d:null 2e:["$","title",null,{"children":"Animated Plot - Dynamic Frame | azizcodes | Observable"}] 33:Tb88,chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("path") .datum(series1) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 1) .attr("d", line); svg.append("circle") .attr("cx",x(loc_x)) .attr("cy",y(loc_y)) .attr("r",.4) .attr("fill",(loc_y>=0)? "green": "red"); svg.append("text") .text(loc_y.toFixed(4)) .attr("x",x(loc_x)) .attr("y",y(loc_y)) .attr("font-family","serif") .attr("font-size","8px") .attr("fill",(loc_y>=0)? "green": "red"); svg.append("line") .attr("x1", x(0)) //<<== change your code here .attr("y1", y(0)) .attr("x2", x(2*pi)) //<<== and here .attr("y2", y(0)) .style("stroke-width", 1) .style("stroke", "grey") svg.append("line") .attr("x1", x(0)) //<<== change your code here .attr("y1", y(1)) .attr("x2", x(2*pi)) //<<== and here .attr("y2", y(1)) .style("stroke-width", 1) .style("stroke", "grey") .style("fill", "none") .style("stroke-dasharray", ("3, 3")); svg.append("line") .attr("x1", x(0)) //<<== change your code here .attr("y1", y(-1)) .attr("x2", x(2*pi)) //<<== and here .attr("y2", y(-1)) .style("stroke-width", 1) .style("stroke", "grey") .style("fill", "none") .style("stroke-dasharray", ("3, 3")); // pi svg.append("circle") .attr("cx",x(pi)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","black") // pi/2 svg.append("circle") .attr("cx",x(pi/2)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","black") // 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","black") // 2*pi svg.append("circle") .attr("cx",x(2*pi)) .attr("cy",.5*(margin.top+height-margin.bottom)) .attr("r",2) .attr("fill","black") // 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") return svg.node(); };34:[] 31:{"id":"3271e0fbd7dea938","slug":"let-them-race-dynamic-frame","title":"Animated Plot - Dynamic Frame","thumbnail":"0eb85e318c65f0334b0e9bc2753436c84fe1e102cd50973c8ea24ff6ea7a2078","access_level":"public","create_time":"$D2020-03-31T01:27:03.901Z","update_time":"$D2020-04-25T22:16:42.808Z","view_time":null,"first_public_time":"$D2020-03-31T17:31:28.223Z","has_unpublished_edits":null,"fork":{"id":"617b4ee0bba3ab6f","slug":"let-them-race","title":"Animated Plot - Static Frame","owner":{"id":"eef055af3c0ca5d2","login":"azizcodes","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"eef055af3c0ca5d2","login":"azizcodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/923bd556017e2db3f7a9c40502700b2ac65735cfddcbc3d344dee76c0206ffba","tier":"starter_2024"},"version":513,"publish_version":513,"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 - Dynamic Frame","cells":[{"id":0,"value":"md`# Animated Plot - Dynamic 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`