This visualization shows how the unemployment rate for each U.S. state changed from 1980 to 2015 at five-year intervals. The height of bar represents the difference of unemployment rate from the national average. Data source: Federal Reserve Bank.

First, we draw a rectangle, repeat it by “State”, then select any resulting rectangle and bind its x-position and y-position to “MapX” and “MapY” respectively. We rescale the axes to spread out the rectangles.

Next, we select any of the rectangles and divide it by “Year”. This gives us a bunch of rectangle collections, each representing the years for an individual state. We then select any of the rectangles in any of the collection, and bind its height to “Unemployment”, fill color to “US Avg”, and change its stroke color to white. We then customize the color mapping so that “Above Average” is red, and “Below Average” is green. We can also adjust the height axis as needed.

We then create a text item using the Text Tool, and repeat it by “State”. Similar to what we did earlier for the rectangles, we bind the texts' x-position to “MapX” and y-position to “MapY”. For “MapX”, we want it to be using the same axis as the rectangle collections, so we choose the option “Merge with MapX” when binding. For “MapY”, we choose the option “Create new scale” instead, because we don’t want the text to be overlapping with the rectangles.

Finally, we make some adjustment to the spacing of the text and rectangles by dragging the axis handles. To use the actual state names, we select any of the text items and bind its content to “State”.