🏠 back to Observable

December 2019 Democratic Debate Bar Chart Race

This was an interesting challenge! The New York Times created a JSON file with all the candidates’s speaking times, and I transformed it into a bar chart race. It definitely involved a lot of tweaking of the template, but I managed to get it working.

At first, I simply had the keyframes variable interpolate between each time a candidate stopped speaking with an equal number of frames. However, I noticed that sometimes (when candidates spoke very briefly) the race slowed down compared to when they talked at length. I fixed this by varying the number of keyframes generated between each datapoint based on how much time passed.

Another change I had to make was to write custom prev and next functions to enable skipping frames to speed up the animation.

One bit I‘d like to add but couldn’t get working is an indication of what topics they were talking about. The Times data includes a topic for each time they spoke, but when I tried to display that information it either didn’t show up or recursively created <g> elements, crashing the notebook. Maybe next debate though?

2 Likes