31:[] 2f:{"title":"D3 Dynamics baby steps","cells":[{"id":0,"value":"# D3 Dynamics baby steps\nSome basic introductions to dynamic movement and interaction (user and data)","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":10,"value":"Here we have a simple static SVG with a in it. The attributes are set statically with hard-coded numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"But it doesn't need to be. The values can be driven by variables.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":17,"value":"width=250","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"^^ go ahead and change the width variable value and see the rectangle change size.\nNote that the other attributes could be set the same way. This is just showing one.","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":35,"value":"viewof width_slider = Inputs.range([0, 500], {label: \"Width\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"^^ User inputs, like this range slider, can be used to set the value more dynamically. Change the slider to see.","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":44,"value":"myRectangle = d3.select(mySVG4).select(\"rect\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"myRectangle.attr(\"width\", 350)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"^^ but even when the initial value is set statically (or by some other process), we can use javascript/d3 to set or update it's value. Every object in d3, including and especially the graphical elements, have mutable values.\n\nTry changing the value in the myRectangle.attr statement and click the Run > button.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":67,"value":"myCircle = d3.select(mySVG5).select(\"circle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"myCircle.attr(\"r\", 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"^^ other objects behave the same. See this circle and change it's radius r attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"myCircle.style(\"fill\",\"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"^^ or style properties like fill color. (stroke, stroke-width, and any other too.) \nAll properties are mutable.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":90,"value":"myRectangle2 = d3.select(mySVG6).select(\"rect\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"myRectangle2.attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"myRectangle2.attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"^^ we can change the object's location using the x or y attributes. Try clicking Play/Run Cell, back and forth, on the two cells just above. Each will set the location of the rectangle, and it jumps into each position.","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":113,"value":"myRectangle3 = d3.select(mySVG7).select(\"rect\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"myRectangle3.transition().duration(1000).attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"myRectangle3.transition().duration(1000).attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"myRectangle3.transition().ease(d3.easeLinear).duration(1000).attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"myRectangle3.transition().ease(d3.easeBounce).duration(1000).attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"^^ but we can also animate it, using a .transition() with a .duration() of 1000 miliseconds, and even with an .ease function to control how it interpolates. Click Run on the cells just above, animating back and forth on two positions.","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":148,"value":"myCircle2 = d3.select(mySVG8).select(\"circle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"myCircle2.transition().duration(1000).attr(\"cx\", 500).attr(\"r\", 150).style(\"fill\",\"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"myCircle2.transition().duration(1000).attr(\"cx\", 50).attr(\"r\", 20).style(\"fill\",\"yellow\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"You can also set multiple attributes or styles at once. \nEven colors will transition through the range.","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":166,"value":"myLine = d3.select(mySVG9).select(\"line\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"myLine.attr(\"transform\", \"rotate(30 500,150)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"^^ transform properties like rotation can also be set.","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"and along with a dynamic variable like a ticker (function imported here from my library), it can now be a fully dynamic and animated object.","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"tick = ticker(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"myLine.attr(\"transform\", \"rotate(\" + tick + \" 500,150)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"import {ticker} from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}