CSS transitions with a chart

[00:00 - 00:12] Okay, so now that we understand CSS transitions, let's see how we can apply that to our charts. So in our example, we have our histogram that we created in the last lesson.

[00:13 - 00:23] And we also have this nice chunky change metric button. So when we click this button, it switches the metric between humidity, UV index , temperature, min.

[00:24 - 00:33] There's a lot of options here that we're cycling through. But the histogram is animated instantaneously, or it's not animating, it's changing from one state to the next.

[00:34 - 00:44] And that can be a little bit jarring and be nice to kind of transition in between these different metrics. So let's look at the code that we have.

[00:45 - 00:57] So first off, this styles.css file has a lot of CSS styles. A lot of them are making this button nice and chunky so that it's fun to click.

[00:58 - 01:15] Some of them are centering the content, just kind of positioning our entire chart and the button. And then we've also moved all of the styles that we were previously doing within our JavaScript file over to the CSS file.

[01:16 - 01:39] Sometimes it's just nice to keep the styles in one file and then the chart logic and positioning in the other file. And then in this chart.js file, we have our histogram function and it's generic so we can take any metric and then at the bottom here we're cycling through these metrics.

[01:40 - 01:45] And this exact code isn't super important at the moment. Let's focus on this CSS transitions.

[01:46 - 01:59] So if we wanted to animate this transition between one metric to the next, the first thing we would do is find that rectangle in our CSS file. And let's add a quick transition here.

[02:00 - 02:05] So let's use a transition shorthand. Let's say we want everything to animate.

[02:06 - 02:18] It should take one second and let's have it ease out just to feel a little bit more realistic. So now when we click this change metric button, the bars are animating from one position to the next.

[02:19 - 02:37] And this is fun but it doesn't exactly match our mental model and when new bars come in, the old ones are still animating over them. So what if instead we only wanted to animate that Y position change instead of the X movement?

[02:38 - 02:46] So let's switch this to only animate Y and height. So let's see.

[02:47 - 03:02] Yep, so that's only transitioning the Y and we'll also want the height to take a second as well. So let's add a height one second, use out comma in between those two transitions.

[03:03 - 03:12] So there we go. The bars height is animating but they're instantaneously changing their horizontal position, which is really nice.

[03:13 - 03:33] One thing you might notice if you're not in Chrome is that your bars probably aren't animating. And this isn't a typo but instead this is because Chrome right now is the only browser that has implemented height and Y and some of these SVG element attributes as CSS values.

[03:34 - 04:12] So in Chrome we could set the height to 100 pixels and now all of our bars will be over righted with what we set them in this JavaScript file to be 100 pixels but that probably won't be working in another browser. So this is just a steep peak of CSS transitions not being the panacea that we all want them to be but they can be really great and easy to implement for attributes that can be set as CSS properties.

[04:13 - 04:27] So stick with me here and we'll talk about alternatives to this. If you want us for all browsers and you want to be animating these SVG attributes.

[04:28 - 04:41] So one way around this is so for our text we can also add a transition. Say we don't want our text to jump like that we'd like it to move with our bars .

[04:42 - 04:57] So let's add a transition here and as we can see that didn't work. So X and Y in no browser right now will be animated because they're not implemented as CSS properties.

[04:58 - 05:14] So I bet if I set the Y value to 100 pixels those text labels aren't going to move because this isn't going to work as a CSS property and therefore can't be transitioned with a CSS transition. But we still want our text to animate.

[05:15 - 05:28] So what we can do instead is switch how we're positioning it. So right now we're positioning our text via the X and the Y attribute.

[05:29 - 05:56] So instead because we want to animate the Y position we can add a style, a transform CSS style and then let's translate only the Y dimension and then grab this value here. So we both want to grab this value and make this a function so we get that data point.

[05:57 - 06:16] So if we take out that Y attribute it's going to default to zero which is exactly what we want because we want it to be translated with our CSS style instead of the Y attribute. And then because we're using a CSS style we have to specify the unit which is in pixels.

[06:17 - 06:27] So now when we click the button our text should animate from one vertical position to the next. And this is looking pretty good.

[06:28 - 06:36] The last thing I want to do is to animate that mean line. It's kind of jumping from one state to the next and we're going to run into the same issue here.

[06:37 - 07:02] So even if we move this transition to our mean class it's still going to jump between one value and the next and that is because we're setting its horizontal position using X1 and X2 which aren't CSS properties. So if we grab this, move it down here and then steal this X position here.

[07:03 - 07:25] And for this one we don't really need it to be a function because this is static across isn't specific to any data binding to that element. And then we can also take this out so we're not double transforming it and then we'll want to switch this to X.

[07:26 - 07:38] And now that mean line should be shifting in the distribution. And this is kind of nice so you can see if the mean line is further left or right for one histogram than the next.

[07:39 - 08:07] And this is really a toy example just to get us used to using CSS transitions and working around issues with certain attributes not animating because they're not CSS properties. So maybe you think this example is a little bit silly and contrived but hopefully you've gotten a good idea of how to animate our chart using CSS transitions.

[08:08 - 08:13] Next up we're going to cover D3 transition and then we'll talk about when you would use one verse the other.