36:null 37:["$","title",null,{"children":"D3 Transitions | tripplybrand | Observable"}] 3d:[] 3b:{"id":"20978ebae6669789","slug":"untitled/2","title":"D3 Transitions","thumbnail":null,"access_level":"public","create_time":"$D2018-02-05T21:32:21.418Z","update_time":"$D2018-02-08T20:48:53.411Z","view_time":null,"first_public_time":"$D2018-02-06T15:37:37.433Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"a38ea93ffd6ce9ce","login":"tripplybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df45fadc313cc48c4b76996fed8f51756e3af7f47caabdb5747e1d6511e991cd","tier":"starter_2024","bio":"","following":false},"version":685,"publish_version":685,"role":null,"authored":false,"authors":[{"type":"individual","id":"14d968782cfd22fe","login":"tripplybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df45fadc313cc48c4b76996fed8f51756e3af7f47caabdb5747e1d6511e991cd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"14d968782cfd22fe","login":"tripplybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df45fadc313cc48c4b76996fed8f51756e3af7f47caabdb5747e1d6511e991cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Transitions","cells":[{"id":144,"value":"md`# D3 Transitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"//Install d3\nd3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"//Import button \nimport {button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`## Change Color Experiment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"//Select square and change background\ncolorChange = () => { \n\t//select the div #square\n\tconst selection = d3.select(\"#square\")\n \t//define transition\n \tconst t = d3.transition()\n \t\t.duration(2000)\n \t\t.ease(d3.easeLinear)\n\n \t//return selection.transition(t).style(\"background\", \"blue\").transition().style(\"background\", \"red\")\n return selection.transition()\n \t\t//Sets the duration based on a function. We can use data to drive the duration.\n .duration(function(d, i) { return i + 2000; })\n \t .ease(d3.easeElasticInOut.amplitude(1).period(0.01))\n .styleTween(\"background\", function() {\n return d3.interpolateRgb(\"red\", \"blue\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"//Interrupt color change\ninterruptColorChange = () => {\n\t//select the div #square\n \tconst selection = d3.select(\"#square\")\n \n return selection.interrupt()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"//Draw square and set background red\nhtml`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"colorChange()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"interruptColorChange()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Move Those SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"moveThem = () => {\n\tconst selection = d3.selectAll(\".vessel\")\n \n return selection.transition()\n \t\t\t.attrTween(\"cx\", function() {\n return d3.interpolateNumber(this.getAttribute(\"cx\"), 200);\n })\n \t\t\t.attrTween(\"cy\", function() {\n return d3.interpolateNumber(this.getAttribute(\"cy\"), 100);\n })\n \t\t\t//What does d look like?\n \t\t\t//Turn this into an equation that calculates the duration by distance*rate\n \t\t\t.duration(function(d, i) { return this.getAttribute(\"cy\") * 30 });\n}\n\n// return this.getAttribute(\"cy\") * 30;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"moveThem()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`## And Now with Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"//Pull in JSON from Gist\ndataImported=d3.json(\"https://gist.githubusercontent.com/tripplybrand/e74a126228e1c0f3c921b67b7569d0c9/raw/a85cc33d9e11b61ab541f6a6323907df1d37fcbf/Animation_Data.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"dataSmall = [\n {\n \"name\": \"1g8n2\",\n \"color\": \"#e4b5bf\",\n \"path\": [\n {\"x\": 0, \"y\": 108, \"rest\": 0},\n {\"x\": 94, \"y\": 180, \"rest\": 0}\n ]\n },\n {\n \"name\": \"1mjw9\",\n \"color\": \"#883c4e\",\n \"path\": [\n {\"x\": 16, \"y\": 300, \"rest\": 0},\n {\"x\": 506,\"y\": 120, \"rest\": 2000},\n {\"x\": 3,\"y\": 116, \"rest\": 0},\n ]\n }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"data=dataImported","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"distance = (x1, y1, x2, y2) => { return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"rate = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"transitionMaster = (transition, pathIndex) => {\n transition\n .delay(function(d) { \n \treturn pathIndex < d.path.length ?\n \td.path[pathIndex-1].rest :\n \tnull;\n })\n \t.attrTween(\"cx\", function(d) {\n \t\treturn pathIndex < d.path.length ?\n \td3.interpolateNumber(this.getAttribute(\"cx\"), d.path[pathIndex].x) :\n \tnull;\n })\n \t.attrTween(\"cy\", function(d) {\n \t\treturn pathIndex < d.path.length ?\n \td3.interpolateNumber(this.getAttribute(\"cy\"), d.path[pathIndex].y) :\n \tnull;\n \t})\n \t.ease(d3.easeLinear)\n .duration(function(d) { \n \treturn pathIndex < d.path.length ?\n \tdistance(this.getAttribute(\"cx\"), this.getAttribute(\"cy\"), d.path[pathIndex].x, \t\t\t\n \t\t\t\td.path[pathIndex].y)/rate :\n \tnull;\n \t})\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"maxPathIndex = Math.max(...data.map(x => x.path.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"pathIndexArray = Array.apply(null, Array(maxPathIndex)).map(function (_, i) {return i+1;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"transitionMap = (g) => {\n pathIndexArray.forEach((x) => {\n g = g.transition().call(transitionMaster, x)\n }) \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"startAnimation = () => {\n \n const svg = d3.select(\"#lineMap\")\n \n //Select Field and place the players\n return svg.selectAll(\"circle\")\n .data(data)\n .enter().append(\"circle\")\n \t.attr(\"class\", \"agent\")\n .attr(\"cx\", function(d) { return d.path[0].x; })\n .attr(\"cy\", function(d) { return d.path[0].y; })\n .attr(\"r\", 5)\n \t.attr(\"id\", function(d) { return d.name; })\n \t.style(\"fill\", function(d) { return d.color; })\n \t.style(\"opacity\", 0)\n .transition()\n .duration(1000)\n .style(\"opacity\", 0.8)\n .transition().call(transitionMap);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"//Interrupt agents in motion\ninterruptAnimation = () => {\n \n \tconst selection = d3.selectAll(\".agent\")\n \n \treturn selection.interrupt();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"restartAnimation = () => {\n\tconst selection = d3.selectAll(\".agent\")\n \n \tselection.remove();\n \treturn startAnimation();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"resumeAnimation = () => {\n return d3.selectAll(\".agent\")\n .transition().call(transitionMap);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"//How do we find the current path index? \nreverseAnimation = () => {\n \tconst pathIndexArrayReversed = pathIndexArray.slice()\n\tconst transitionMapReverse = (g) => {\n (pathIndexArrayReversed.reverse()).forEach((x) => {\n g = g.transition().call(transitionMaster, x)\n }) \n }\n \n return d3.selectAll(\".agent\")\n \t.transition().call(transitionMapReverse);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"//Start Simulation button command\n{\n startButton;\n return restartAnimation()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"//Layout field\nhtml``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"viewof startButton = button({\n \t\t\t\t\tvalue: \"Start Simulation\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"interruptAnimation()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"resumeAnimation()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"reverseAnimation()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3c:"$3b:body"