This bump chart shows how the rankings of new car colors change over the years in North America. The magenta color denotes ‘other’ colors. Original visualization is designed by Rody Zakovich.

First, we draw a line, repeat it by “Color”, then densify each line by “Year”.

Next, we direct select any vertex on any line and bind the x position to “Year” and y position to “Rank”.

We then change the layout of the collection of polylines to “None”, so that the lines share the same y axis. Let’s rescale the axes to make the chart larger. Also, it is more intuitive to arrange the rankings from top to bottom, so we can drag the y axis handle to flip it.

We then select any line, bind its stroke color to “Color”, and make it thicker. These changes apply to all the other lines. Let’s also customize the visual styles: change the curve mode of the lines to “Bump X”, and update the vertex shape to circle with radius 4. Note that the vertex colors are consistent with the line stroke colors by default.

Finally, we change the background color, and customize the color mapping through the interactive legend, so that the colors match their names. We can also change the text color of the axes to make them easier to read.