2d:null 2e:["$","title",null,{"children":"Sin from Scratch - Playing with Variables | azizcodes | Observable"}] 33:Td74,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //svg.append("g") //.call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(data) .attr("fill", " #FFFFCC") .attr("stroke", "grey") .attr("stroke-width", 1.5) .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")); //--------------------------------------------------------------- svg.append("circle") .attr("cx",x(xt)) .attr("cy",y(yt)) .attr("r",4) .attr("fill","red") // text box svg.append("text") .text(yt.toFixed(4)) .attr("x",x(3*pi/2)) .attr("y",.5*(margin.top+height-margin.bottom)-50) .attr("font-family","serif") .attr("font-size","18px") .attr("fill",(yt>=0)? "green": "red"); //---------------------------------------------------------------1 // add a text svg.append("text") .text("The Sine Function") .attr("x",.5*(margin.left+width-margin.right)-80) .attr("y",20) .attr("font-family","sans-serif") .attr("font-size","20px") .attr("fill","black") return svg.node(); };34:Te2d,thedata=[{"x":0.0,"y":0.0},{"x":0.0634665183,"y":0.0634239197},{"x":0.1269330365,"y":0.1265924536},{"x":0.1903995548,"y":0.1892512444},{"x":0.253866073,"y":0.2511479872},{"x":0.3173325913,"y":0.3120334457},{"x":0.3807991095,"y":0.3716624557},{"x":0.4442656278,"y":0.4297949121},{"x":0.507732146,"y":0.4861967361},{"x":0.5711986643,"y":0.5406408175},{"x":0.6346651825,"y":0.5929079291},{"x":0.6981317008,"y":0.6427876097},{"x":0.7615982191,"y":0.6900790115},{"x":0.8250647373,"y":0.7345917087},{"x":0.8885312556,"y":0.7761464643},{"x":0.9519977738,"y":0.8145759521},{"x":1.0154642921,"y":0.8497254299},{"x":1.0789308103,"y":0.8814533634},{"x":1.1423973286,"y":0.9096319954},{"x":1.2058638468,"y":0.9341478603},{"x":1.2693303651,"y":0.9549022414},{"x":1.3327968833,"y":0.9718115683},{"x":1.3962634016,"y":0.984807753},{"x":1.4597299198,"y":0.9938384645},{"x":1.5231964381,"y":0.9988673392},{"x":1.5866629564,"y":0.9998741277},{"x":1.6501294746,"y":0.996854776},{"x":1.7135959929,"y":0.9898214419},{"x":1.7770625111,"y":0.9788024462},{"x":1.8405290294,"y":0.9638421586},{"x":1.9039955476,"y":0.9450008187},{"x":1.9674620659,"y":0.9223542941},{"x":2.0309285841,"y":0.8959937743},{"x":2.0943951024,"y":0.8660254038},{"x":2.1578616206,"y":0.8325698546},{"x":2.2213281389,"y":0.7957618405},{"x":2.2847946572,"y":0.7557495744},{"x":2.3482611754,"y":0.7126941714},{"x":2.4117276937,"y":0.6667690005},{"x":2.4751942119,"y":0.6181589862},{"x":2.5386607302,"y":0.5670598639},{"x":2.6021272484,"y":0.5136773916},{"x":2.6655937667,"y":0.4582265217},{"x":2.7290602849,"y":0.4009305354},{"x":2.7925268032,"y":0.3420201433},{"x":2.8559933214,"y":0.2817325568},{"x":2.9194598397,"y":0.2203105328},{"x":2.982926358,"y":0.158001396},{"x":3.0463928762,"y":0.0950560433},{"x":3.1098593945,"y":0.0317279335},{"x":3.1733259127,"y":-0.0317279335},{"x":3.236792431,"y":-0.0950560433},{"x":3.3002589492,"y":-0.158001396},{"x":3.3637254675,"y":-0.2203105328},{"x":3.4271919857,"y":-0.2817325568},{"x":3.490658504,"y":-0.3420201433},{"x":3.5541250222,"y":-0.4009305354},{"x":3.6175915405,"y":-0.4582265217},{"x":3.6810580588,"y":-0.5136773916},{"x":3.744524577,"y":-0.5670598639},{"x":3.8079910953,"y":-0.6181589862},{"x":3.8714576135,"y":-0.6667690005},{"x":3.9349241318,"y":-0.7126941714},{"x":3.99839065,"y":-0.7557495744},{"x":4.0618571683,"y":-0.7957618405},{"x":4.1253236865,"y":-0.8325698546},{"x":4.1887902048,"y":-0.8660254038},{"x":4.252256723,"y":-0.8959937743},{"x":4.3157232413,"y":-0.9223542941},{"x":4.3791897595,"y":-0.9450008187},{"x":4.4426562778,"y":-0.9638421586},{"x":4.5061227961,"y":-0.9788024462},{"x":4.5695893143,"y":-0.9898214419},{"x":4.6330558326,"y":-0.996854776},{"x":4.6965223508,"y":-0.9998741277},{"x":4.7599888691,"y":-0.9988673392},{"x":4.8234553873,"y":-0.9938384645},{"x":4.8869219056,"y":-0.984807753},{"x":4.9503884238,"y":-0.9718115683},{"x":5.0138549421,"y":-0.9549022414},{"x":5.0773214603,"y":-0.9341478603},{"x":5.1407879786,"y":-0.9096319954},{"x":5.2042544969,"y":-0.8814533634},{"x":5.2677210151,"y":-0.8497254299},{"x":5.3311875334,"y":-0.8145759521},{"x":5.3946540516,"y":-0.7761464643},{"x":5.4581205699,"y":-0.7345917087},{"x":5.5215870881,"y":-0.6900790115},{"x":5.5850536064,"y":-0.6427876097},{"x":5.6485201246,"y":-0.5929079291},{"x":5.7119866429,"y":-0.5406408175},{"x":5.7754531611,"y":-0.4861967361},{"x":5.8389196794,"y":-0.4297949121},{"x":5.9023861977,"y":-0.3716624557},{"x":5.9658527159,"y":-0.3120334457},{"x":6.0293192342,"y":-0.2511479872},{"x":6.0927857524,"y":-0.1892512444},{"x":6.1562522707,"y":-0.1265924536},{"x":6.2197187889,"y":-0.0634239197},{"x":6.2831853072,"y":-2.449293598e-16}]35:T223b,md` ~~~html

~~~ `36:[] 31:{"id":"8ca087f990db0955","slug":"sin-from-scratch-playing-with-variables","title":"Sin from Scratch - Playing with Variables","thumbnail":"452cc7a2681bac48c497acbec07ff62a22552bebf87e2a13c7002f5a3d1e9bb2","access_level":"public","create_time":"$D2019-07-03T05:28:56.498Z","update_time":"$D2019-07-04T09:56:18.356Z","view_time":null,"first_public_time":"$D2019-07-03T14:49:56.021Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"eef055af3c0ca5d2","login":"azizcodes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/923bd556017e2db3f7a9c40502700b2ac65735cfddcbc3d344dee76c0206ffba","tier":"starter_2024"},"version":492,"publish_version":492,"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":0,"collection":{"id":"1b458929e6dd3f4e","slug":"animations-public","title":"animations-public","owner":{"id":"eef055af3c0ca5d2","login":"azizcodes","name":""}},"type":"notebook","body":{"title":"Sin from Scratch - Playing with Variables","cells":[{"id":0,"value":"md`# Sin from Scratch - Playing with Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"t = {\n let i = 0;\n while (true) {\n yield ++i/50;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"xt = t-Math.floor(t/(2*pi))*2*pi","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"yt = Math.sin(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"d3.select(\"#xy\")\n .append(\"p\")\n .text(\"this text \\u03C0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"html`\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"pi=Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`## Import D3 and the Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"d3=require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"data=Object.assign(thedata,{y: \"sin(x)\"},{x:\"x\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`The data was created with pandas using\n~~~python\ndata.to_json(orient='records')\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## Define The View`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width=500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height=300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({top: 40, right: 60, bottom: 40, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## Define the Domains and Ranges`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y = d3.scaleLinear()\n //.domain([0, d3.max(data, d => d.y)])\n .domain([-1, 1])\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"xAxis = g => g\n .attr(\"transform\", 'translate(0,'+(height-margin.bottom)+')')\n .call(d3.axisBottom(x).ticks(4)) //.ticks(5).tickSizeOuter(0));\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 20)\n .attr(\"y\", -5)\n .attr(\"color\", \"grey\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"yAxis = g => g\n .attr(\"transform\", 'translate('+margin.left+',0)')\n .call(d3.axisLeft(y).ticks(2))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -28)\n .attr(\"y\", -20)\n .attr(\"color\", \"grey\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\"))\n //.text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Define the Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"line = d3.line()\n .x(d => x(d.x))\n .y(d => y(d.y));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\nThen draw the chart using\n~~~js\nchart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", line);\n \n return svg.node();\n};\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`## Translation to HTML (work in progress)\nThis is as far as I came translating the above into HTML. __I am still struggling with the generator part of it__. The problem seem to be that the code won't display anything until it has finished the execution. The solution seem to be in *promises* and *asynchronous execution*.\n\n* mbostock talks about it briefly [here](https://observablehq.com/@observablehq/five-minute-introduction) and gives [this link](https://github.com/tc39/proposal-async-iteration) and [this one](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators).\n* [this is](https://website.education.wisc.edu/~swu28/d3t/concept.html) how you select in d3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"