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

April 29

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

The Drag Function

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"html`It can also be very useful to be able to drag and drop elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"html`We'll start with a circle in the middle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html`

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

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"html`Here is how you set up a drag behavior.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag().on(\"start\",function(){})\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"html`Behavior on start.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag().on(\"start\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"html`Behavior on drag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag().on(\"drag\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"html`Behavior on end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag().on(\"end\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"tomato\")\n })\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"html`

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

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"html`Start, drag, and end altogether.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag()\n .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\",\"goldenrod\")\n })\n .on(\"end\",function(){\n var target = d3.select(this)\n target.attr(\"fill\",\"lightcyan\")\n })\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"html`Let's get set-up to understand dragging coordinates.`","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 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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`Here is how you can access the coordinates of the mouse when you are dragging.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"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 circle = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",300)\n .attr(\"cy\",150)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag()\n .on(\"drag\",function(){\n var x = d3.event.x\n var y = 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":143,"value":"html`

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`Can you write code so that you can drag the circle around the svg container?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"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 .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n var drag = d3.drag()\n .on(\"drag\",function(){\n var target = d3.select(this)\n var x = d3.event.x\n var y = d3.event.y\n target.attr(\"cx\",x)\n target.attr(\"cy\",y) \n })\n \n drag(circle)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"html`

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

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`You can apply the drag behavior to multiple elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"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 drag = d3.drag()\n .on(\"drag\",function(){\n var target = d3.select(this)\n var x = d3.event.x\n var y = d3.event.y\n target.attr(\"cx\",x)\n target.attr(\"cy\",y) \n })\n\n var circle1 = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",200)\n .attr(\"cy\",150)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n .call(drag)\n \n var circle2 = svg.append(\"circle\")\n .attr(\"r\",50)\n .attr(\"cx\",400)\n .attr(\"cy\",150)\n .attr(\"fill\",\"tomato\")\n .attr(\"stroke\",\"black\")\n .call(drag)\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"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":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}