30:[] 2e:{"title":"\nStarting with D3\n","cells":[{"id":0,"value":"html`\n\n

\nStarting with D3\n

\nThe Basics\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:beige;border:2px solid black\")\n svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"fill\",\"#CB9CCC\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\",300)\n .attr(\"cy\", 150)\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"html`\n

\nGroups and Transformations\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:beige;border:2px solid black\")\n var outer = svg.append(\"g\").attr(\"transform\",\"translate(300,150)\")\n var inner = outer.append(\"g\").attr(\"transform\",`rotate(${s})scale(0.75)`)\n \n inner.append(\"line\")\n .attr(\"stroke\",\"black\")\n .attr(\"x1\",-105)\n .attr(\"x2\",105)\n inner.append(\"circle\")\n .attr(\"r\",45)\n .attr(\"fill\",\"#CB9CCC\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\",-150)\n inner.append(\"circle\")\n .attr(\"r\",45)\n .attr(\"fill\",\"#CB9CCC\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\",150)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"age = 19","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"html`\n

Further Refreshers

\nI am ${age} years old\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"viewof s = slider({step:1, max:360})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"html`\n

\nPaths\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:beige;border:2px solid black\")\n svg.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"none\")\n .attr(\"d\",\"M0,0 L100,173 L200,251 L300,267\")\n \n \n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:beige;border:2px solid black\")\n var pathData = d3.line(data).x(d => d.x).y(d => d.y)(data)\n svg.append(\"path\") \n .attr(\"stroke\",\"black\")\n .attr(\"fill\", \"none\")\n .attr(\"d\",pathData) \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1043,"value":"data = [{x:28,y:219},{x:160,y:189},{x:292,y:61},{x:413,y:117},{x:512,y:232}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}