30:T459,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var outer = svg.append("g").attr("transform","translate(300,150)") var textBox = outer.append("rect") .attr("width",120) .attr("height",30) .attr("x",110) .attr("y",-50) .attr("fill","white") .attr("stroke","black") .attr("opacity",0) var text = outer.append("text") .text(`radius = 100`) .attr("x",122) .attr("y",-30) .attr("fill","tomato") .attr("opacity",0) outer.append("circle") .attr("r",100) .attr("fill","cornflowerblue") .attr("stroke","black") .on("mouseover",function(){ text.attr("opacity",1) textBox.attr("opacity",1) }) .on("mouseout",function(){ text.attr("opacity",0) textBox.attr("opacity",0) }) return svg.node() }31:T417,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") for(var i = 0; i < 10; i++){ svg.append("circle") .attr("cx",Math.random()*600) .attr("cy",Math.random()*300) .attr("r",Math.random()*50) .attr("fill","cornflowerblue") .attr("stroke","black") .on("mouseover",function(){ var target = d3.select(this) target.attr("fill","tomato") var x = parseInt(target.attr("cx")) var y = parseInt(target.attr("cy")) var r = parseInt(target.attr("r")) text.attr("x",x + r + 5) text.attr("y",y) text.attr("opacity",1) text.text(`r = ${r}`) }) .on("mouseout",function(){ var target = d3.select(this) target.attr("fill","cornflowerblue") text.attr("opacity",0) }) var text = svg.append("text") .text("") .attr("opacity",0) } return svg.node() }32:[] 2e:{"title":"April 24","cells":[{"id":0,"value":"html`

April 24

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

More on Events

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"html`An example of mouseover.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"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(\"mouseover\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n\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":209,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"html`Can you make the circle change color with a mouseover and then change back with a mouseout?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"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(\"mouseover\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"cornflowerblue\")\n })\n\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"html`Put a text message next to the circle, with no event handlers yet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"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 text = outer.append(\"text\")\n .text(\"This is a circle\")\n .attr(\"x\",100)\n .attr(\"y\",-50)\n \n outer.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"html`Now, make the message appear with a mouseover and disappear with a mouseout.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"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 text = outer.append(\"text\")\n .text(\"This is a circle\")\n .attr(\"x\",100)\n .attr(\"y\",-50)\n .attr(\"opacity\",0)\n \n outer.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"mouseover\",function(){\n text.attr(\"opacity\",1)\n })\n .on(\"mouseout\",function(){\n text.attr(\"opacity\",0)\n })\n \n\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"html`Can you make the message a bit more stylish?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"html`

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

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"html`Draw 10 circles with random coordinates and radii, with no event handlers yet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"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 for(var i = 0; i < 10; i++){\n svg.append(\"circle\")\n .attr(\"cx\",Math.random()*600)\n .attr(\"cy\",Math.random()*300)\n .attr(\"r\",Math.random()*50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`Can you make the circles change color with a mouseover and change back with a mouseout?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"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 \n for(var i = 0; i < 10; i++){\n svg.append(\"circle\")\n .attr(\"cx\",Math.random()*600)\n .attr(\"cy\",Math.random()*300)\n .attr(\"r\",Math.random()*50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"mouseover\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"cornflowerblue\")\n })\n \n\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"html`Can you also make a message appear?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"html`\n\n\n`","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 \n for(var i = 0; i < 10; i++){\n svg.append(\"circle\")\n .attr(\"cx\",Math.random()*600)\n .attr(\"cy\",Math.random()*300)\n .attr(\"r\",Math.random()*50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"mouseover\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n var x = target.attr(\"cx\")\n var y = target.attr(\"cy\")\n text.attr(\"x\",x)\n text.attr(\"y\",y)\n text.attr(\"opacity\",1)\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"cornflowerblue\")\n text.attr(\"opacity\",0)\n })\n \n var text = svg.append(\"text\")\n .text(\"This is a circle\")\n .attr(\"opacity\",0)\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"html`

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"html`How to move the message away from the circle. (Watch the video right away for this one.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"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 \n for(var i = 0; i < 10; i++){\n svg.append(\"circle\")\n .attr(\"cx\",Math.random()*600)\n .attr(\"cy\",Math.random()*300)\n .attr(\"r\",Math.random()*50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"mouseover\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n var x = parseInt(target.attr(\"cx\"))\n var y = target.attr(\"cy\")\n text.attr(\"x\",x +50)\n text.attr(\"y\",y)\n text.attr(\"opacity\",1)\n })\n .on(\"mouseout\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"cornflowerblue\")\n text.attr(\"opacity\",0)\n })\n \n var text = svg.append(\"text\")\n .text(\"This is a circle\")\n .attr(\"opacity\",0)\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`

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

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html`Can you move the message right to the edge of each circle? Can you make the message display the radius?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html`

Libraries

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