Aiming Stacks to Groups transition

Inspired by the transition in this block, I had created this study page. What is required to transit between 2 states? No, not the algorithm or the interface to make the transition, but the states themselves. As a beginner in D3, it is challenging to come up with a decent and simple bar chart. One can aim higher or dream bigger. To get there is different

After understanding how to create the bars, stacks(this page) and grouped bars. Transition is tackled in stacked to group bars.

        d3-dsv - load and parse data
        d3-scale - x- and y-position, and color encoding
        d3-format - SI prefix formatting (e.g., “10M” for 10,000,000)
        d3-array - compute simple statistics (e.g., max)
        d3-axis - display axes
        d3-shape - computed stacked positions
    

One of the challenges I faced was having different styles needed across different charts that is created. The base style of the page is imported through the style.css file outside the page. While the style specific to the charts and page are created using the tag.

How to wrangle the data as it is imported using d3.csv

        function wrangle(d, i, columns){
            console.log(d) //this is the entire row
            console.log(i) // index of the row
            console.log(columns) // columns headers are already seperated 
            for (i = 1, t = 0; i < columns.length; ++i){
                d[columns[i]] = +d[columns[i]] //converting the cell vals to numbers
                t += d[columns[i]]
                d.total = t
            }
            return d
        }    
        //bringing in the data
        d3.csv("cityPopulation.csv", wrangle).then((data) =>{
            console.log(data)
        })
    

The complex charts are created as layouts in D3. Stack chart is one such complex chart. The rectangles has to be placed on top of the other, and their size needs to be modified based on the scale. Following is the main script part that makes the data ready for stacking.

        .data(d3.stack().keys(keys)(data))
    

Two more notable commands were the following. They show how important is to know the data structures

        keys.slice().reverse() reversing the keys to append it to chart
        y(y.ticks().pop()) getting the top most value of the scale