At the same time, simple animated data-viz was popular on the social media. It was the bar race chart. Many people were obsessed with these, and surprisingly is easy to make. One of the popular tools on the internet is flourish. It’s free, has a lot of chart option, interactive, and has a easy learning curve, anybody can make an interesting interactive chart by their own.
The first data-viz I try to make is the one and only: “Bar Race Chart”. Bar chart (and line chart) is the simplest chart using d3.js, even any d3.js tutorial start with making a bar chart. The “race” animation itself was another challenge. Since I work in a news company, I ask one of my researcher friend for a simple dataset from a published article that contained an annual data series to it, so I can animated. So she gave me the dataset about annual foreign tourism trend in Indonesia. The article can be read here. The article itself already have a bar race chart from the same dataset, made by the researcher team with flourish.
The original chart was plain and simple, and the most care about was the design standard. I usually made a static infographic following some design standard such as standard font, aspect ratio, and company logo. It was all determined by the art director. the flourish chart can’t fit the given standard. Another thing I want to improve from the original chart was the animation interactivity. Original flourish bar chart are automatically played and looped, and I want to give more control for it such as pause, play, next, and previous button. Later I realized it was a hell of code.
After days of coding back and forth, many errors I don’t even know why, reading and asking multiple tutorials and documentation, I finished my first d3.js bar race chart. It still have many flaws here and there, yet I done the most of the features I planned to make, and I’m proud of myself to finish it