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

April 27

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

Transitions

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html`Draw a square in the corner.`","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(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`

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

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`We'll start with the square in the corner but then immediately change it's x-coordinate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n square.attr(\"x\",300)\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"html`Here's how we can actually see the transition.`","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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n square.transition().attr(\"x\",300)\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"html`You can change the speed of the transition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n square.transition().duration(5000).attr(\"x\",300)\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"html`We can go in two directions at once.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n square.transition().duration(2000).attr(\"x\",300).attr(\"y\",150)\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 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"html`We can go in one direction, and then the other. But the following method doesn't quite work.`","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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n await square.transition().duration(2000).attr(\"x\",300).end()\n square.transition().duration(2000).attr(\"y\",150)\n\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"html`Here's how to do it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n yield svg.node() \n \n await square.transition().duration(2000).attr(\"x\",300).end()\n square.transition().duration(2000).attr(\"y\",150)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`You can change what is called the \"easing\". Below we will use d3.easeBounceOut, but there are other ones you can investigate here: https://github.com/d3/d3-ease.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"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 square = svg.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n yield svg.node() \n \n await square.transition().duration(2000).ease(d3.easeLinear).attr(\"x\",300).end()\n square.transition().duration(2000).ease(d3.easeLinear).attr(\"y\",150)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`Make a group and call it \"outer\". Make another group, call it \"inner\", and put it inside \"outer\". Then, put the square and circle inside \"inner\". Draw a line right through the middle of the svg container. Start the square with the circle on the line. Move the square and rotate it 180 degrees, all at the same time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"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 //line\n svg.append(\"line\")\n .attr(\"x1\",0)\n .attr(\"y1\",150)\n .attr(\"x2\",600)\n .attr(\"y2\",150)\n .attr(\"stroke\",\"black\")\n \n //groups\n var outer = svg.append(\"g\").attr(\"transform\",\"translate(0,125)\")\n var inner = outer.append(\"g\").attr(\"transform\",\"rotate(0)\")\n \n //square\n var square = inner.append(\"rect\")\n .attr(\"x\",0)\n .attr(\"y\",0)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n \n //dot\n inner.append(\"circle\")\n .attr(\"cx\",25)\n .attr(\"cy\",25)\n .attr(\"r\",3)\n \n yield svg.node() \n \n outer.transition().duration(2000).attr(\"transform\",\"translate(550,125)\")\n inner.transition().duration(2000).attr(\"transform\",\"rotate(180)\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"html`

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

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"html`Repeat the exercise above, but keep the circle on the line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"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 //line\n svg.append(\"line\")\n .attr(\"x1\",0)\n .attr(\"y1\",150)\n .attr(\"x2\",600)\n .attr(\"y2\",150)\n .attr(\"stroke\",\"black\")\n\n //groups\n var outer = svg.append(\"g\").attr(\"transform\",\"translate(0,150)\")\n var inner = outer.append(\"g\").attr(\"transform\",\"rotate(0)\")\n \n //square\n var square = inner.append(\"rect\")\n .attr(\"x\",-25)\n .attr(\"y\",-25)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n\n //dot\n inner.append(\"circle\")\n .attr(\"cx\",0)\n .attr(\"cy\",0)\n .attr(\"r\",3) \n \n yield svg.node() \n \n outer.transition().duration(2000).attr(\"transform\",\"translate(575,150)\")\n inner.transition().duration(2000).attr(\"transform\",\"rotate(180)\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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":"$W30","stdlib":"1","titling":"auto"}