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: "CSS transitions with a chart"
description: "We add CSS transitions to our histogram, animating changes as the bars change."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/hb58bgk42r
codeFolder: course/module_03/lesson_03.02/protected/code/04-animations-and-transitions/end
---

### CSS transition with a chart

In this example, the `index.html` is importing a CSS stylesheet (`styles.css`) and the `chart.js` file, which is an updated version of our histogram drawing code from **Module 3**.

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

The code should look mostly familiar, but you might notice a few changes. Don't worry about those changes at the moment — they're not important to our main mission.

Let's look inside that `styles.css` file. We can see that we have already set the basic styles for our bars (`.bin rect`), bar labels (`.bin text`), mean line (`.mean`), and x axis label (`.x-axis-label`).

Great! Now that we know the lay of the land, let's look at our example — we should see our histogram and a **Change metric** button.

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

When we click the button, our chart re-draws with the next metric, but the change is instantaneous.

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

Does this next metric have fewer bars than the previous one? Does our mean line move to the left or the right? These questions can be answered more easily if we transition gradually from one view to the other.

Let's add an animation whenever our bars update (`.bin rect`).

```css
.bin rect {
    fill: cornflowerblue;
    transition: all 1s ease-out;
}
```

A>Note that this CSS transition will currently only work in the Chrome browser. This is because Chrome is the only browser that has implemented the part of the [SVG 2 spec](https://www.w3.org/TR/SVG/styling.html#StylingUsingCSS) which allows `height` as a CSS property, letting us animate the transition.

Now when we update our metric, our bars shift slowly to one side while changing height — we can see that their `width`, `height`, `x`, and `y` values are animating. This may be fun to watch, but it doesn't really represent our mental model of bar charts. It would make more sense for the bars to change position instantaneously and animate any height differences. Let's only transition the `height` and `y` values.

We add CSS transitions to our histogram, animating changes as the bars change.