31:T583,md` ### Part 1: Transitions: Animation the D3 Way The robust and real way to animate and modify elements using D3 is using the [D3 Transition methods](https://github.com/mbostock/d3/wiki/Transitions). You will be excited to learn that D3 has methods for transitions that you can activate through user input, such as clicks. These transitions can change size, color, position, and really anything that can be set in the attributes of a page element. Let's explore this a little further. To start, lets create a simple D3 visualization with a rectangle. To quote Jerome Cukier from his [fantastic tutorial on Animations and Transitions](http://duspviz.mit.edu/d3-workshop/transitions-animation/#citation1), If you know how to draw in D3, you almost know how to animate! We use transitions to change the properties of the rectangle. Our page layout, to give us a better idea, will look like the following. ![alt text](http://duspviz.mit.edu/_assets/img/svg-simple-rect.png) ### Using Transitions To implement a transition, you set up a trigger, be it a button or a click or some type of user event, and then within the trigger, change the respective attributes of the SVG you are seeking to modify. For example, set up a rectangle element and a button. When that button gets a click, have it change some of the attributes of the element. **All of our transitions will go in the "start on click" function!** `32:T431,{ // Width and height of the SVG object let w = 400; let h = 175; //Make an SVG Container var svgContainer = d3.select(DOM.svg(w, h)) .attr("width", 400) .attr("height", 200) .style("border-color", "black") .style("border-style", "solid") .style("border-width", "1px"); // Draw the Rectangle var rectangle = svgContainer.append("rect") .attr("x", 50) .attr("y", 50) .attr("width", 50) .attr("height", 50); d3.select("#start4").on("click", function() { rectangle .transition() .attr("fill", "red") // New Color (Hex, RGB, or Web Safe) .attr("opacity", 0.5) // New Opacity .attr("width", 100) // New Width .attr("height", 100) // New Height .attr("x", 250) .delay(100); // New Position }); d3.select("#reset4").on("click", function() { rectangle .transition() .attr("fill", "black") // New Color (Hex, RGB, or Web Safe) .attr("opacity", 1) // New Opacity .attr("width", 50) // New Width .attr("height", 50) // New Height .attr("x", 50); // New Position }); return svgContainer.node(); }33:T534,{ // Width and height of the SVG object let w = 400; let h = 175; //Make an SVG Container var svgContainer = d3.select(DOM.svg(w, h)) .attr("width", 400) .attr("height", 200) .style("border-color", "black") .style("border-style", "solid") .style("border-width", "1px"); // Draw the Rectangle var rectangle = svgContainer.append("rect") .attr("x", 50) .attr("y", 50) .attr("width", 50) .attr("height", 50); d3.select("#start7").on("click", function() { rectangle .transition() .attr("x", 250) .attr("width", 100) .attr("height", 100) .attr("opacity", 0.5) .attr("fill", "red") .delay(500) .duration(2500) .ease(d3.easeBounce) .on("end",function() { // on end of transition... d3.select(this) .transition() // second transition .attr("x", 150) // second x .attr("width", 75) // second width .attr("height", 75) // second height .attr("opacity", 0.75) // second opacity .attr("fill", "blue") // second color .delay(500) // second delay .duration(2500) // second time .ease(d3.easeBounce); // second ease }); }); d3.select("#reset7").on("click", function() { rectangle .transition() .attr("x", 50) .attr("y", 50); // New Position }); return svgContainer.node(); }34:T8ce,{ var w = 150; var h = 105; // Get length of Array and set length so we can an input dataset of variable length var arrayLength = ratData.length; // length of dataset var maxValue = d3.max(ratData, function(d) { return +d.rats;} ); // get maximum value of our dataset var x_axisLength = 100; // length of x-axis in our layout var y_axisLength = 100; // length of y-axis in our layout // Use a scale for the height of the visualization var yScale = d3.scaleLinear() .domain([0, maxValue]) .range([0, y_axisLength]); //Make an SVG Container var svg = d3.select(DOM.svg(w, h)) // .append("svg") .attr("width", w) .attr("height", h) .attr("style", "outline: thin solid black;"); // Select and generate rectangle elements var rect = svg.selectAll( "rect" ) .data( selectedData ) .enter() .append("rect") .attr( "x", function(d,i){ return i * (x_axisLength/arrayLength) + 30; // Set x coordinate of rectangle to index of data value (i) *25 }) .attr( "y", function(d){ return h - yScale(d.rats) - 5; // Set y coordinate of rect using the y scale }) .attr( "width", (x_axisLength/arrayLength) - 1) .attr( "height", function(d){ return yScale(d.rats); // Set height of using the scale }) .attr( "fill", "steelblue") .on("mouseover", d => tooltip.style("visibility", "visible").text(d.city + ": " + d.rats)) .on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.city + ": " + d.rats)) .on("mouseout", d => tooltip.style("visibility", "hidden")); // Create y-axis svg.append("line") .attr("x1", 30) .attr("y1", 0) .attr("x2", 30) .attr("y2", 100) .attr("stroke-width", 2) .attr("stroke", "black"); // Create x-axis svg.append("line") .attr("x1", 30) .attr("y1", 100) .attr("x2", 130) .attr("y2", 100) .attr("stroke-width", 2) .attr("stroke", "black"); // y-axis label svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .text("No. of Rats") .attr("transform", "translate(20, 20) rotate(-90)") .attr("font-size", "14px") .attr("font-family", "'Open Sans', sans-serif"); return svg.node(); }35:T668,md`You might also want to sort a bar chart. Check out this great example [here](http://bl.ocks.org/mbostock/3885705). ### Part 4: Animate a Line Chart: An Unemployment Graph Lets continue exploring animation by look In this next component, lets look at a chart of national unemployment. This chart is based off of the [Line Chart](http://bl.ocks.org/mbostock/3883245) example from Mike Bostocks bl.ocks, and I went and downloaded unemployment data from the [Bureau of Labor Statistics](http://data.bls.gov/timeseries/LNS14000000). The chart, using the Bureau of Labor Statistics data, looks like the following. This chart is fairly simple. To add some bells and whistles, we can use the fundamentals of transitions we learned above and build on them. Because we grabbed some code and customized, the base line chart and associated code is complete. Our task is to identify the lines of code we need to change in order to create our animation. #### Time Animation with an "Unrolling" Line Chart A common and nice looking transition for a line chart like the one above is the "unrolling" line chart. An "unrolling" line chart is one in which the lines gradually enter from origin point by point. This style of animation works particularly well for time series animation, showing the change on the X-Axis over time. The unemployment rate is a nice example of this, let's animate the line chart to achieve the following. #### i. Identify the Code that Draws the Line In the code, locate the lines in which the SVG path is appended to our document. It will look like the following, near the bottom, within the method that loads the CSV. ` 36:T521,md ` #### ii. Manipulate the Stroke Dash Array To "unroll" the line chart, we are going to manipulate the array that describes the dash we want for the line. This might be a bit confusing at first, but hang in there. The [Stroke Dash Array property](http://www.w3.org/TR/SVG/painting.html#StrokeProperties) of the SVG path element lets us create an array that has the stroke and dash of the path. To illustrate, this looks like the following. Because we are creating an array of the dash and gap, we can set these to be dynamic and changing. ![alt text](http://duspviz.mit.edu/_assets/img/dash-array.png) The [Stroke Dash Offset](http://www.w3.org/TR/SVG/painting.html#StrokeProperties) value specifies the distance into the dash pattern to start the dash. Therefore, we can start the Dash Offset at the length of the path, then transition the offset to zero using the built in D3 transition methods. To get the length of the path, create a variable called total length. Total length will hold the total length of the path using the [getTotalLength method of the SVG Path Element](http://www.w3.org/TR/SVG/paths.html#__svg__SVGPathElement__getTotalLength). The code will look like this. Enter this at the bottom of the script, **but still within the main load CSV method that our path is being in drawn in!** `37:T657,{ var margin = {top: 60, right: 20, bottom: 30, left: 50}, width = 700 - margin.left - margin.right, height = 365 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width, height)); let x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]) let y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]).nice() .range([height - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)) let line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); let path = svg.append("path") .attr("d", line(data)) .attr("stroke", "steelblue") .attr("stroke-width", "1.5") .attr("fill", "none"); var totalLength = path.node().getTotalLength() path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(4000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) return svg.node(); }38:T6b9,{ var margin = {top: 60, right: 20, bottom: 30, left: 50}, width = 700 - margin.left - margin.right, height = 365 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width, height)); let x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]) let y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]).nice() .range([height - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)) let line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); let path = svg.append("path") .attr("d", line(data)) .attr("stroke", "steelblue") .attr("stroke-width", "1.5") .attr("class", "line") .attr("fill", "none"); var totalLength = path.node().getTotalLength() d3.select("#startLine").on("click", function() { path .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() .duration(4000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) }) return svg.node(); }39:[] 2f:{"title":"Week 12 - Interaction and Animation: D3 Transitions, Behaviors, and Brushing","cells":[{"id":0,"value":"md`# Week 12 - Interaction and Animation: D3 Transitions, Behaviors, and Brushing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n \n // Set up the reset button to move it back to 50,50\n d3.select(\"#reset\").on(\"click\", function() {\n rectangle\n .transition()\n .attr(\"x\", 50)\n .attr(\"y\", 50);\n });\n\n d3.select(\"#start\").on(\"click\", function() {\n rectangle\n .transition(); // ALL OF OUR TRANSITIONS WILL GO HERE!\n });\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md` The following examples show some basic transitions. Two buttons have been added to help showcase the example, and demonstrate how to start the transition and then reset the transition.\n\n#### Position \nClick the buttons to try it!\n\nThe code is pretty simple.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 250); // New Position\n\t});\n\n\td3.select(\"#reset\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 50); // Old Position\n\t});\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`#### Size \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start1\").on(\"click\", function() {\n console.log(28282822828343434)\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"width\", 100) // New Width\n\t\t\t.attr(\"height\", 100); // New Height\n\t});\n\n\td3.select(\"#reset1\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"width\", 50)\n\t\t\t.attr(\"height\", 50);\n\t});\n \n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`#### In Class Exercise: Opacity \nModify the code below to modify the opacity when you click on the button. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start2\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n .style(\"opacity\", 0.5)\n\t});\n\n\td3.select(\"#reset2\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n .style(\"opacity\", 1)\n \n\t});\n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`#### In Class Exercise: Color \nModify the code below to modify the color when you click on the button. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start3\").on(\"click\", function() {\n\t\trectangle\n .style(\"fill\", \"red\")\n\t});\n\n\td3.select(\"#reset3\").on(\"click\", function() {\n\t\trectangle\n .style(\"fill\", \"black\")\n\t});\n \n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`### Starting Transitions: Duration, Delay, and Easing\nSome additional transition properties you can easily set are duration (or the amount of time taken to complete the transition), delay (the delay observed before the transition starts after initializing the transition), and easing type (the method in which the transition is completed). Read more in the D3 Documentation on [Starting Transitions](https://github.com/mbostock/d3/wiki/Transitions#starting-transitions).\n\n#### Delay\nA delay to the start of your transition can be implemented by including the following in your script. Delay is in milliseconds (ms), and the default is no delay.\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`#### Duration\nDuration is the time it takes to complete the transition. Duration is in milliseconds (ms), and the default is 250ms.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"{\n // Width and height of the SVG object\n let w = 400;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start5\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 250) // New Position\n\t\t\t.duration(2500); // Set Duration of 2500ms (2.5 seconds)\n\t});\n\n\td3.select(\"#reset5\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 50) // New Position\n\t\t\t.duration(2500); // Set Duration of 2500ms (2.5 seconds)\n\t});\n \n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`#### Easing\nEasing is the method in which the transition is completed.\n\nThe default is 'cubic-in-out', which resembles a slow start, fast middle, and slow finish. There are many other types. To see an illustration of the easing types, view the [D3js v4 Easing Example on bl.ocks](https://bl.ocks.org/mbostock/248bac3b8e354a9103c4). Add some of these to the above examples to see what they do! Start with 'bounce'.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"{\t\n // Width and height of the SVG object\n let w = 400;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start6\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 250) // New Position\n\t\t\t.ease(d3.easeBounce); // Use the Bounce Transition Ease\n\t});\n\n\td3.select(\"#reset6\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 50) // New Position\n\t\t\t.ease(d3.easeBounce); // Use the Bounce Transition Ease\n\t});\n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"md`### In Class Exercise:\nChange the type of ease for the example above. You can use some of [these](https://github.com/d3/d3/blob/master/API.md#easings-d3-ease)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"html`\n\n\n`\n//rememeber to change the start and restart id","pinned":true,"hidden":false,"mode":"ojs"},{"id":857,"value":"// your code here\n{\t\n // Width and height of the SVG object\n let w = 400;\n let h = 175;\n \n\t//Make an SVG Container\n\tvar svgContainer = d3.select(DOM.svg(w, h))\n\t\t.attr(\"width\", 400)\n\t\t.attr(\"height\", 200)\n\t\t.style(\"border-color\", \"black\")\n\t\t.style(\"border-style\", \"solid\")\n\t\t.style(\"border-width\", \"1px\");\n\t \n\t// Draw the Rectangle\n\tvar rectangle = svgContainer.append(\"rect\")\n\t\t.attr(\"x\", 50)\n\t\t.attr(\"y\", 50)\n\t\t.attr(\"width\", 50)\n\t\t.attr(\"height\", 50);\n\n\td3.select(\"#start8\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 250) // New Position\n\t\t\t.ease(d3.easePolyIn); // Use the Bounce Transition Ease\n\t});\n\n\td3.select(\"#reset8\").on(\"click\", function() {\n\t\trectangle\n\t\t\t.transition()\n\t\t\t.attr(\"x\", 50) // New Position\n\t\t\t.ease(d3.easePolyIn); // Use the Bounce Transition Ease\n\t});\n return svgContainer.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`#### Double Transitions\nYou might also find that one transition is not enough. There are a couple different methods avaiable to address this. Say you want the transition to first go to one spot, then to a second spot. You can run a function at the end of a transition using **.each(\"end\", function(){...})**. Your function will run when the transition ends, meaning in here, you can actually put another transition. Let's take a look.\n\nThis will run two transitions! View source on the example above to see how we implemented this.\n\nThis may seem pretty basic, but you can build pretty sophisticated graphics from these principles along. Let's dive a little deeper, and animate something real. In the following sections, we will make an interactive scatterplot. We'll then take data from the Bureau of Labor Statistics and create a animated line chart. We'll conclude by looking at a few other interaction examples.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"md`### In Class Exercise:\nChange the second transition for a different one!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"// Your code here","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`### Part 2: Scatterplot - Adding Transitions between Data Fields\n\nA common operation will be to change the dataset, then apply a transition to move the points in the dataset to the new locations. Say we now have data that looks like this, with two values we want to transition between.\n\n| City | # of Rats (2015)\t | # of Coffee Shops (2015)\t | # of Rats (2016)\t| # of Coffee Shops (2016) |\n| :-------------: |:-------------:| :-----:| :-------------: |:-------------:| \n| Brookline | 40 | 50 | 60 | 30|\n| Boston | 90 | 120 | 10 | 30 |\n| Cambridge|30 | 90 | 80 | 100|\n| Chelsea|10 | 10 | 100 | 120|\n| Somervillle|60 | 40 | 40 | 60|\n\nAnd we want the scatterplot to transition the data between the two years.\n\nYou can apply the transitions learned above to complete this task.\n\nStart with our basic CSV loaded scatterplot. Copy and paste this code into a blank document.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md` #### 1. Add some buttons\nFrom here, we can make some adjustments to read in our new dataset. First, let's add two buttons that can be used to trigger the transition. We will set them up to listen for click events. Put these in the body of the page.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md` #### 2. Load the new dataset and update the fields\nNext, in our code, we need to adjust the dataset to read in the new dataset. The circles we create should be at the locations found in the new dataset. In the CSV, the fields we are interested in are rats_2015, coffee_2015, rats_2016, and coffee_2016.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"ratObject = d3.csv(\"https://gist.githubusercontent.com/cesandoval/90183e0d9fab6c19119348bc79c78a4a/raw/fec1e6b7a220c42f9bbcb3260adc718fa9a68b5a/coffee_rodents_transform.csv\", (d) => ({city : d.city,rats2015 : +d.rats_2015,coffee2015 : +d.coffee_2015,rats2016 : +d.rats_2016,coffee2016 : + d.coffee_2016}))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"{\n //Width and height\n var w = 180;\n var h = 180;\n\n //Make an SVG Container\n var svg = d3.select(DOM.svg(w, h))\n // .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"style\", \"outline: thin solid black;\");\n\n var circle = svg.selectAll(\"circle\")\n .data(ratObject)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", function(d) {\n return d.rats2015;\n })\n .attr(\"cy\", function(d) {\n return d.coffee2015;\n })\n .attr(\"r\", 5);\n \n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md` #### 3. Write the transition functions\nOur last step is to write two functions that will transition the data between our two datasets when they hear a click on one of the buttons. We can use the d3 on click functionality to listen for this. The functions will look like as follows. Check them out.\n\nThese functions transition the circle objects on the page to new locations based different fields in the dataset when a click is heard on either **#start or #reset**. They functions take each circle and apply a new X and Y.\n\nIn this example, we only transitioned location, but we could also transition color, size, and other attributes as described above.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"{\n //Width and height\n var w = 180;\n var h = 180;\n\n //Make an SVG Container\n var svg = d3.select(DOM.svg(w, h))\n // .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .attr(\"style\", \"outline: thin solid black;\");\n\n var circle = svg.selectAll(\"circle\")\n .data(ratObject)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", function(d) {\n return d.rats2015;\n })\n .attr(\"cy\", function(d) {\n return d.coffee2015;\n })\n .attr(\"r\", 5);\n \n\n d3.select(\"#start8\").on(\"click\", function() {\n circle\n .transition()\n .attr(\"cx\", function(d) {\n return d.rats2016;\n })\n .attr(\"cy\", function(d) {\n return d.coffee2016;\n })\n });\n\n d3.select(\"#reset8\").on(\"click\", function() {\n circle\n .transition()\n .attr(\"cx\", function(d) {\n return d.rats2015;\n })\n .attr(\"cy\", function(d) {\n return d.coffee2015;\n })\n });\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`### Part 3: Bar Chart - Adding Transitions between Two Separate Datasets\n\n#### 1. Write up a function to load the new dataset\nThe first thing you want to do is write up a function to load the new dataset. In order to replace the dataset, we will take advantage of Observable's views!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"viewof chart = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"tooltip = d3.select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"font-family\", \"'Open Sans', sans-serif\")\n .style(\"font-size\", \"12px\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\"); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"ratData = d3.csv(\"https://gist.githubusercontent.com/cesandoval/63376af7e561c92de00cf4d77d5fdd25/raw/14d008c98952b85c56190a891ba0167cd6c35553/rat-data-larger.csv\", (d) => ({city : d.city,rats : +d.rats}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"ratDataV2 = d3.csv(\"https://gist.githubusercontent.com/cesandoval/9613b27a16344bb5bf2e1fb29c475681/raw/e11dbfabb8f1b4a974ec8ac3407cffa44d817df9/rat-data-large-v2.csv\", (d) => ({city : d.city,rats : +d.rats}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`#### 2. Write up our code\nSince we can load both datasets asynchronously, we can simply use Observable's **viewof** functions to change on the fly the type of dataset that we are loading. One way to do this is to use a **case** function. The case function evaluates our input and triggers a subfunction. In this case, our subfunction is just returning a different dataset. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"selectedData = { \n switch (chartType) {\n case \"Chart 1\": return ratData\n case \"Chart 2\": return ratDataV2\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md` #### 3. Putting it all together\nLastly, write our usual chart code. We will be using the **selectedData** coming from our **switch** function. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"viewof chartType = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"md `### In Class Exercise:\nModify the code so that each dataset uses a different fill color.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"// your code here\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"data = Object.assign((await d3.csv(\"https://gist.githubusercontent.com/mbostock/14613fb82f32f40119009c94f5a46d72/raw/d0d70ffb7b749714e4ba1dece761f6502b2bdea2/aapl.csv\", d3.autoType)).map(({date, close}) => ({date, value: close})), {y: \"$ Close\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"{\n var margin = {top: 60, right: 20, bottom: 30, left: 50},\n width = 700 - margin.left - margin.right,\n height = 365 - margin.top - margin.bottom;\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`We need to modify these lines of code to set up the transition but only slightly. This is where our data is being bound to our line. The method we are going to use to animate is the [Stroke Dash Array property](http://www.w3.org/TR/SVG/painting.html#StrokeProperties) of the SVG Path element that describe how an element is stroked. Mike Bostock has a nice example of [Stroke Dash Interpolation on his bl.ocks pages](http://bl.ocks.org/mbostock/5649592).\n\nReplace the above with the following. All we are doing is setting our append method to a variable.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"{\n var margin = {top: 60, right: 20, bottom: 30, left: 50},\n width = 700 - margin.left - margin.right,\n height = 365 - margin.top - margin.bottom;\n \n const svg = d3.select(DOM.svg(width, height));\n \n let path = svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"{\n var margin = {top: 60, right: 20, bottom: 30, left: 50},\n width = 700 - margin.left - margin.right,\n height = 365 - margin.top - margin.bottom;\n \n const svg = d3.select(DOM.svg(width, height));\n \n let path = svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n \n // Variable to Hold Total Length\n var totalLength = path.node().getTotalLength();\n\n // Set Properties of Dash Array and Dash Offset and initiate Transition\n path\n .attr(\"stroke-dasharray\", totalLength + \" \" + totalLength)\n .attr(\"stroke-dashoffset\", totalLength)\n .transition() // Call Transition Method\n .duration(4000) // Set Duration timing (ms)\n .ease(d3.easeLinear) // Set Easing option\n .attr(\"stroke-dashoffset\", 0); // Set final value of dash-offset for transition\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"md`This block of code get the total length of the line, sets the **dasharray** and dashoffset properties to the total length, then sets up the transition to adjust the dash offset to zero. The result is an animation that makes it appear that the graph is unraveling over time! `","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`#### iii. Control it with some Buttons\nBy default, the transition will run on page load. You might want to give your user a bit more control over this so they view the animation, or even start it over. If you looked at the examples above, you noticed a 'Start Time Animation' button and a 'Reset' button that controled the visualization. Insert buttons into the body element of your HTML, right above the script, by entering the following.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`Then, in your script, put the entire creation of the SVG and the associated animating transition within the d3 onClick event. Read more about D3 click events [here](https://github.com/mbostock/d3/wiki/Selections#on). Your code will look like the following.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`#### Other Methods\nAnother method for unrolling a bar chart that involves creating a custom interpolation function is outlined in a fantastic post on ['Unrolling' Line Charts by Simon Kendall](http://big-elephants.com/2014-06/unrolling-line-charts-d3js/), of Big Elephants. I recommend running through this tutorial to help you understand another way to 'unroll' a line chart. Also, explore, compare, and contrast the following examples on unrolling line charts.\n\n- [Stroke Dash Interpolation](http://bl.ocks.org/mbostock/5649592)\n- [Unrolling Line Chart - Debraid on Tributary](http://tributary.io/s/6094415?user=DeBraid)\n\n#### In Class Exercise:\nThere are many circumstances you might want to add a tooltip to your chart to retrieve exact values. Take a look at this example on [X-Value Mouseovers from Mike Bostock](http://bl.ocks.org/mbostock/3902569) and give it a shot. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"// Your code here\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md` ### Focus and Context via Brushing\nWhen working with big data, you will often find that you might want to focus or filter your data. Mike Bostock's bl.ocks have a nice example of [Focus and Context via Brushing](http://bl.ocks.org/mbostock/1667367) available that works very nicely with our data.\n\nLook at the [Focus and Context via Brushing Example](http://bl.ocks.org/mbostock/1667367) by Mike Bostock. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md` #### The Structure of the Brushing Example\nThe brushing example from Mike Bostock is arranged as two separate graphs that are organized using CSS to sit right next to one another. D3 JavaScript is then used to bind the data to the two graphs, one called focus and the other called context. The data is bound separately to each graph, meaning you can set different variables for each graph if you want. Finally, the D3 Brushing Component is used to provide interaction between the two graphs. If something changes in one, you will see the effects in the other.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md` ### The D3 Brush Component\nThis example uses the D3 Brush component. Brushing refers to the connection of two or more views of the same data, such that a change to the representation in one view affects the representation in the other3. As mentioned above, when working with large datasets, using brushing and scrubbing can be a great way to drill down into the data or provide greater context when viewing a small portion of a very large dataset.\n\nIn this example, brushing is implemented in a few steps. Read more on the brushing options in the [D3 Brush documentation](https://github.com/mbostock/d3/wiki/SVG-Controls). You can also check out these other exciting brushing examples.\n\n- [Scatterplot Matrix Brushing](http://bl.ocks.org/mbostock/4063663)\n- [Brush Snapping](http://bl.ocks.org/mbostock/6232537)\n- [Brush Transitions](http://bl.ocks.org/mbostock/6216724)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"d3v4 = require(\"d3@4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}