Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "d3.transition"
description: "We learn about d3.transition, and talk about when we would use it instead of CSS transitions. We then update our histogram to animate using d3.transition."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/x67bo77r1g
codeFolder: course/module_03/lesson_03.03/protected/code/04-animations-and-transitions/end
---

# d3.transition

CSS transitions have our back for simple property changes, but for more complex animations we'll need to use `d3.transition()` from the [**d3-transition**](https://github.com/d3/d3-transition) module. When would we want to use `d3.transition()` instead of CSS transitions?

-   When we want to ensure that multiple animations line up
-   When we want to do something when the animation ends (for example starting another animation)
-   When the property we want to animate isn't a CSS property (remember when we tried to animate our bars' heights but had to use `transform` instead? `d3.translate` can animate non-CSS property changes.)
-   When we want to synchronize adding and removing elements with animations
-   When we might interrupt halfway through a transition
-   When we want a custom animation (for example, we could write a custom interpolator for changing text that adds new letters one-by-one)

Let's get our hands dirty by re-implementing the CSS transitions for our histogram.

<CodeSandboxEmbed
  src="//codesandbox.io/s/05s5k?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

Let's again start by animating any changes to our bars. Instead of adding a `transition` property to our `styles.css` file, we'll start in the `chart.js` file where we set our `barRects` attributes.

As a reminder, when we run:

```javascript
const barRects = binGroups.select("rect")
```

we're creating a d3 selection object that contains all `<rect>` elements. Let's log that to the console as a refresher of what a selection object looks like.

```javascript
const barRects = binGroups.select("rect")
        .attr("x", d => xScale(d.x0) + barPadding)
        .attr("y", d => yScale(yAccessor(d)))
        .attr("height", d => dimensions.boundedHeight
            - yScale(yAccessor(d))
        )
        .attr("width", d => d3.max([
          0,
          xScale(d.x1) - xScale(d.x0) - barPadding
        ]))

console.log(barRects)
```

![bars selection](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.03/public/images/4-animations-and-transitions/bars-rect-selection.png)

We can use the `.transition()` method on our d3 selection object to transform our selection object into a d3 transition object.

```javascript
const barRects = binGroups.select("rect")
    .transition()
        .attr("x", d => xScale(d.x0) + barPadding)
        .attr("y", d => yScale(yAccessor(d)))
        .attr("height", d => dimensions.boundedHeight
          - yScale(yAccessor(d))
        )
        .attr("width", d => d3.max([
          0,
          xScale(d.x1) - xScale(d.x0) - barPadding
        ]))

console.log(barRects)
```

![bars transition](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.03/public/images/4-animations-and-transitions/bars-rect-transition.png)

d3 transition objects look a lot like selection objects, with a `_groups` list of relevant DOM elements and a `_parents` list of ancestor elements. They have two additional keys: `_id` and `_name`, but that's not all that has changed.

Let's expand the `__proto__` of our transition object.

A>`__proto__` is a native property of JavaScript objects that exposes methods and values that this specific object has inherited. If you're unfamiliar with JavaScript Prototypal Inheritance and want to read up, the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) are a good place to start.

A>In this case, we can see that the `__proto__` property contains d3-specific methods, and the nested `__proto__` object contains native object methods, such as `toString()`.

![Transition object, expanded](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.03/public/images/4-animations-and-transitions/transition-object-expanded.png)

We can see that some methods are inherited from d3 selection objects (eg. `.call()` and `.each()`), but most are overwritten by new transition methods. When we click the **Change metric** button now, we can see that our bar changes are animated. This makes sense — any `.attr()` updates chained after a `.transition()` call will use transition's `.attr()` method, which attempts to interpolate between old and new values.

Something looks strange though - our new bars are flying in from the top left corner.

![Bars flying in](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.03/public/images/4-animations-and-transitions/bars-transition-fly-in.png)

A>Note that d3 transitions animate over 0.25 seconds — we'll learn how to change that in a minute!

Knowing that `<rect>`s are drawn in the top left corner by default, this makes sense. But how do we prevent this?

Remember how we can isolate new data points with `.enter()`? Let's find the line where we're adding new `<rect>`s and set their initial values. We want them to start in the right horizontal location, but be 0 pixels tall so we can animate them "growing" from the x axis.

Let's also have them be green to start to make it clear which bars we're targeting. We'll need to set the fill using an inline style using `.style()` instead of setting the attribute in order to override the CSS styles in `styles.css`.

```javascript
newBinGroups.append("rect")
        .attr("height", 0)
        .attr("x", d => xScale(d.x0) + barPadding)
        .attr("y", dimensions.boundedHeight)
        .attr("width", d => d3.max([
          0,
          xScale(d.x1) - xScale(d.x0) - barPadding
        ]))
        .style("fill", "yellowgreen")
```

A>Why are we using `.style()` instead of `.attr()` to set the fill? We need the `fill` value to be an inline style instead of an SVG attribute in order to override the CSS styles in `styles.css`. The way CSS specificity works means that inline styles override class selector styles, which override SVG attribute styles.

We learn about d3.transition, and talk about when we would use it instead of CSS transitions. We then update our histogram to animate using d3.transition.