Day 16: Bar Chart Race

Yesterday, we have already prepared the data for this bar chart race. Then we are ready to create this chart. I found two examples to follow:

• Bar Char Race, Explained
• Make your own Custom Bar Chart Race with D3.js

The idea is that we populate a new bar chart at a certain interval. In this example, we will update the bar chart every month.

The structure is that we create a render function which will create the bars and their peripherals. Then we set an interval to update our chart, the first argument of setInterval is an function it will execute, the second argument is the duration of the number of milliseconds you want to wait before the callback function is called again.

function render(dataset) {
     //update bars

     //update axis

     //update label at the right of our bars

     //update the text at right bottom corner

}

setInterval(function() {
        1. stop animation if we reach the end of YearMonth
        2. create currentData that is only one month of data
        3. call function render(currentData)
        4. increase the YearMonth Index
    }, 1000)

I simplified the codes from the examples and you can find my codes here.