31:[] 2f:{"title":"April 28 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 28 (Grad Data Viz)

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

A Return to Events

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"html`Review of click.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"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(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"click\",function(){\n var target = d3.select(this)\n var fill = target.attr(\"fill\")\n if(fill == \"cornflowerblue\"){\n target.attr(\"fill\",\"tomato\")\n }else{\n target.attr(\"fill\",\"cornflowerblue\")\n }\n })\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"html`

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

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`Review of mouseover and mouseout.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"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(\"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":43,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"html`Coordinates of click.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"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 text = svg.append(\"text\")\n .text(`( , )`)\n .attr(\"x\",50)\n .attr(\"y\",50)\n \n svg.append(\"circle\")\n .attr(\"r\",100)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .on(\"click\",function(){\n var coordinates = d3.mouse(this)\n var x = d3.format(\".0f\")(coordinates[0])\n var y = d3.format(\".0f\")(coordinates[1])\n text.text(`(${x} , ${y} )`)\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`Coordinates within a group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"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 text = svg.append(\"text\")\n .text(`( , )`)\n .attr(\"x\",50)\n .attr(\"y\",50)\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 = d3.format(\".0f\")(coordinates[0])\n var y = d3.format(\".0f\")(coordinates[1])\n text.text(`(${x} , ${y} )`)\n })\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"html`Can you write an application such that when the user clicks the svg container, a circle appears there?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"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 target = d3.select(this)\n var coordinates = d3.mouse(this)\n var x = coordinates[0]\n var y = coordinates[1]\n target.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"cx\",x)\n .attr(\"cy\",y)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n })\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"html`

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

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`Can you embellish the example above so that each circle turns tomato on a mouseover and back to cornflowerblue on a mouseout?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"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 target = d3.select(this)\n var coordinates = d3.mouse(this)\n var x = coordinates[0]\n var y = coordinates[1]\n target.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"cx\",x)\n .attr(\"cy\",y)\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":92,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`Drag behavior.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"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 circle1 = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",200)\n .attr(\"cy\",150)\n \n var circle2 = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",400)\n .attr(\"cy\",150)\n \n var drag = d3.drag().on(\"start\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n .on(\"drag\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"cornflowerblue\")\n })\n .on(\"end\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"black\")\n })\n \n drag(circle1)\n\n \n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html`Drag coordinates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"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 var text = svg.append(\"text\")\n .text(`( , )`)\n .attr(\"x\",50)\n .attr(\"y\",50)\n \n var circle = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n \n \n var drag = d3.drag().on(\"drag\",function(){\n var x = d3.format(\".0f\")(d3.event.x)\n var y = d3.format(\".0f\")(d3.event.y)\n text.text(`(${x}, ${y})`)\n })\n \n drag(circle) \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"html`

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`Can you drag the circle around the svg container?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"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\",50)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n\n var drag = d3.drag().on(\"drag\",function(){\n var x = (d3.event.x)\n var y = (d3.event.y)\n var target = d3.select(this)\n target.attr(\"cx\",x).attr(\"cy\",y)\n })\n \n drag(circle) \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"html`

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

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"html`Dragging multiple elements.`","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 var origin = [] \n\n var drag = d3.drag()\n .on(\"start\",function(){\n var target = d3.select(this)\n origin = [target.attr(\"cx\"),target.attr(\"cy\")]\n })\n .on(\"drag\",function(){\n var x = (d3.event.x)\n var y = (d3.event.y)\n var target = d3.select(this)\n target.attr(\"cx\",x).attr(\"cy\",y)\n })\n .on(\"end\",function(){\n var target = d3.select(this)\n target.attr(\"cx\",origin[0])\n target.attr(\"cy\",origin[1])\n })\n \n for(var i = 0; i < 10; i++){\n svg.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"cx\",Math.random()*600)\n .attr(\"cy\",Math.random()*300)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .call(drag)\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"html`

Libraries

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