30:[] 2e:{"title":"April 22","cells":[{"id":0,"value":"html`

April 22

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Events

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`To get set up, let's draw a simple circle in the middle of the svg container.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`Here we see how to access one of the circle's attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n \n console.log(circle.attr(\"fill\"))\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"html`Here we see how to change one of the circle's attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n \n circle.attr(\"fill\",\"tomato\")\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"html`A refresher on functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"square = function(x){\n return x*x\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"square(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"greeting = function(){\n return \"Hello!\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"greeting()","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"sumTwoNumbers = function(x,y){\n return x+y\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"sumTwoNumbers(3,5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"html`A refresher on if statements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"x = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"{\n if(x < 10){\n return \"less\"\n }else{\n return \"more\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"{\n if(x == 8){\n return \"You win!\"\n }else if(x == 7){\n return \"You almost won!\"\n }else{\n return \"You lost!\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"html`Adding a click handler.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .on(\"click\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"html`A more complex click handler.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .on(\"click\",function(){\n var target = d3.select(this)\n var color = target.attr(\"fill\")\n if(color == \"cornflowerblue\"){\n target.attr(\"fill\",\"tomato\")\n }else{\n target.attr(\"fill\",\"cornflowerblue\")\n }\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`Accessing the coordinates of a click.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .on(\"click\",function(){\n var coordinates = d3.mouse(this)\n console.log(coordinates)\n var x = coordinates[0]\n console.log(x)\n var y = coordinates[1]\n console.log(y)\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"html`What about groups?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var outer = svg.append(\"g\").attr(\"transform\",\"translate(300,150)\")\n var circle = outer.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .on(\"click\",function(){\n var coordinates = d3.mouse(this)\n console.log(coordinates)\n var x = coordinates[0]\n console.log(x)\n var y = coordinates[1]\n console.log(y)\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`Can you write a program such that every time the user clicks the svg container, a small circle is appended there?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n svg.on(\"click\",function(){\n var coordinates = d3.mouse(this)\n var x = coordinates[0]\n var y = coordinates[1]\n svg.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"cx\",x)\n .attr(\"cy\",y)\n })\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`

Example 11

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`Can you write a program such that every time the user clicks just the circle, a small circle is appended there?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var outer = svg.append(\"g\").attr(\"transform\",\"translate(300,150)\")\n \n outer.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"click\",function(){\n var coordinates = d3.mouse(this)\n var x = coordinates[0]\n var y = coordinates[1]\n svg.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"cx\",x)\n .attr(\"cy\",y)\n .attr(\"fill\",\"tomato\")\n .attr(\"stroke\",\"black\")\n })\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}