Transitions in D3.js

Colt Steele
A free video tutorial from Colt Steele
Developer and Bootcamp Instructor
4.7 instructor rating • 9 courses • 929,494 students

Learn more from the full course

The Advanced Web Developer Bootcamp

Learn React 16, Redux, D3, ES2015, Testing, CSS Flexbox, Animations, SVG, AJAX, and more!

34:08:21 of on-demand video • Updated April 2018

  • Make REAL web applications using cutting-edge technologies
  • Build responsive applications using modern CSS technologies like flexbox
  • Build JSON APIs using Node, Express and MongoDB
  • Learn the most popular front end library React and master the fundamentals around state, props and the component lifecycle
  • Use babel and webpack to transpile and bundle code
  • Understand what the Virtual DOM is and how React performs reconciliation
  • Leverage Component Lifecycle methods with React to include making AJAX calls properly
  • Secure Node, Express, Mongo and React applications on the front-end and back-end using bcrypt and JSON Web Tokens
  • Add routing to a single page application with the most popular routing library for react, React Router.
  • Manage State with a centralized store using Redux
  • Connect Redux with a React application to build scalable production applications with client-side state management
  • Select and manipulate elements in the DOM using D3
  • Build dynamic visualizations using D3 and SVG
  • Use D3 to build scatterplots, histograms, pie charts and force graphs
  • Build compelling map visualizations with GeoJSON and TopoJSON
  • Master how to handle asynchronous code using callbacks, promises, generators and async functions
  • Understand how JavaScript handles asynchronous code using the Event Loop with the Stack, Heap and Queue.
  • Use advanced array methods to build a solid understanding of functional programming
  • Create dynamic single page applications using AJAX
  • Structure applications with design patterns using closure and modules
  • Explain how Object Oriented Programming works with a thorough understanding of the keyword this and the new keyword
  • Refactor code using call, apply and bind to remove duplication
  • Use jQuery to build single page applications and understand the limitations of just using jQuery
  • Create block scope with the let keyword and use the const keyword to prevent variables from being redeclared
  • Clean up code using arrow functions and master method binding without using the bind keyword
  • Use default parameters, for of loops and the rest and spread operator to write more concise and more maintainable code
  • Refactor an ES5 application to use ES2015
  • Master the new class syntax and create instance methods, class methods
  • Implement inheritance in ES2015 using extends and super
  • Leverage newer data structures like Maps and Sets to better solve problems
  • Learn cutting edge features to the JavaScript language with ES2016, 2017 as well as experimental JavaScript additions
  • Solve problems similar to what you would get in a developer interview or phone screen
English [Auto] Welcome back. In this video we'll learn how to use transitions to help improve the look of our graphs during updates as usual. Here are some links to the starter code will be working with. Let's go back to the first bar chart we made. This is a graph of births around the world by month as we change the value of the slider. The bars update the values for different years. Right now when we change the year the visualization updates automatically but it's often nice to have a smoother transition between values. D-3 supports these types of transitions with a method called unsurprisingly transition D-3 transitions are somewhat similar to D-3 selections. Both have methods scowled at her in that style for example they let you update properties and attributes on DOM elements. You can also change transitions together merge transitions and access the selection that a transition is attached to. We won't dig into all of the complexities of transitions but we will highlight some of the most important features to begin. You can create a transition from a selection by calling dot transition on it. When you do this you get a D-3 transition object not a Selection object. If you look at the return values from transition in the console you'll see that its constructor function is transition from a bar graph. This means that we can add just one line of code to our javascript file to get started using D-3 transitions. As you can see now when we update the ears the bars don't change instantly but transition from one height to another. Notice that when we called transition we didn't have to change our outer function calls. Why is this after all before we were calling at or on a selection. And now we're calling it a transition. It's important to note that all those selections and transitions both have an adder style method. These methods are not the same when you call that Adorjan. So for example D-3 will set a new value for that attribute right away when you call that at or on a transition. However D-3 will calculate intermediate values between the old value and the new value which is what gives the impression of a smooth transition. You can see this in the elements tab as you move the slider around the Y and height attributes or changing multiple times as the bars transition from their old values to the new ones. So how does D-3 know how to transition between values. Fortunately D-3 is smart enough to detect colors and numbers when used as values for attributes or styles. It can also pick out numbers inside of strings in these cases. It transitions between the current value in a new value being set with Dot adder or dot style. This process is called interpellation. You can also define your own custom interpolators if the defaults and D-3 aren't sufficient. We won't address this process here but it's important to highlight one example where a custom Terminator is needed. If you try to add transitions to our pie chart from earlier you'll see a bunch of errors in the console. Remember that when we learned about the command for path elements and SD We saw that the fourth and fifth arguments for the are command determined which are in which circle will get drawn. These arguments each took on values of zero or one. But when you try to transition this graph the three attempts to interpolate these arguments to values in between 0 and 1. This gives an invalid attribute for the path element and hence the error. So if you're trying to make transitions for pie charts you'll probably need a custom interpreter by paragraphs dealing with simpler SVGA elements such as scatterplot or bar charts. Transition assumptions the D-3 makes will be fine. When you create a transition by default it will last 250 milliseconds to change this. You can use the duration method when you pass an lvalue to duration. You can overwrite the default length of the duration as what we saw with selection methods. You can pass on a single value to duration or a callback which has access to the current piece of data in the index. This can be helpful if you want different elements to have different durations transitions also have a particular animation speed which is slow at the beginning and end and fast in the middle. That type of animation speed used it's called the easing D-3 comes with many built in types of Eason's you can write your own as well. But for now let's explore a few of the ones that D-3 provides to override the default easing. You can use that easy method and pass a new easing to highlight the effects of different reasons. Let's set the duration to two thousand milliseconds. Now when we refresh the page and change the year it's easier to see the behavior of the animation speed. This easing is theories Kubik easing called D-3. Cubic another common animation speed is linear. In this case the speed of the animation doesn't change. We can change the using using the ease of method. Let's pass on the theory that is linear and see the difference as you can see. Now the is transition at a constant rate of speed. You can check out the D-3 docs for an exhaustive list of reasons. There are way too many to go through here. Another helpful method is called DeLay. This allows you to delay the transition by some fixed amount of time that you pass in as with duration. You can pass on a single value or a callback if you want different elements to have different delays. You'll often see this method used if you want to stagger the animation for different SVGA elements. For example we could use the index to delay each month's transition by an additional 250 milliseconds. Let's move on to the last transmission method will look at the method just like selections B-3 transitions have access to an on message. However the events that D-3 transitions can listen for aren't dominance. There are specific transition related events that are built into the three. There are only three types of D-3 transition of this start and an interrupt. As you might guess start fires when the transition starts and fires when the transition ends and interrupt fires. If the transition gets interrupted to see these transition events in action. Let's add a title to our graph that specifies what you're looking at. The graph loads with data from 1967. So I'll put that in the title initially. Now position it where I want it and bump the font size up a bit. Whenever a transition starts I'd like to update the text in my title to tell the user that the date is updating to some New Year. Then when the transition ends we can update the text once more to confirm that the transition has ended. This sort of works but as you can tell the updating jumps around a lot. Because of the delay between transitions on these rectangles the start event is triggering for each rectangle which causes the text to jump around. One way to fix this is to only listen for the start event on one of the rectangles. Here we can just listen for the start event on the first rectangle. If you want. You can also wait to trigger the end event by only listening for it on the last rectangle to make sure will always grab the last index regardless of the number of rectangles we can use. The third argument in the callback which will give us an array of elements in our current select. There's not really much I want to do on interrupt but just so that we can see it in action. What's console log a message whenever a transition gets interrupted. If I wait for the transition to complete before changing years nothing gets locked to the console. But if I change years too quickly the rectangles will need to adjust to the latest year. Which means that any existing transitions get interrupted. That's all I'll say about transitions. And the next video will talk about managing asynchronous code with D-3. I'll see you there.