Tweaking the Bars and Labels

Transitions can be enhanced by adding color to help the reader understand what is being added or removed.

We'll cover the following

We are going to change the colors of the bars before playing the animation. Colors can be a great way of helping the reader understand if a shape is being added or removed. Currently, the bars will always remain the same color regardless of what happens. The second thing we will do is animate the labels properly. They are experiencing the same issue we had with the bars.

Transitioning colors

Let’s start with the color of the bars. We are going to update the functions we passed into the join() function. We will chain some attr() functions to change the fill.

Get hands-on with 1200+ tech skills courses.