Creating Grouped Bar Charts

Grouping the bars under one category is a different problem. This page shows how that is being solved.

Below is the list of D3 libraries used to implement the charts

        d3.csv - load and parse data
        d3.scaleOrdinal - x-position encoding and color encoding
        d3.scaleLinear - y-position encoding
        d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
        d3.max - compute domains
        d3.keys - compute column names
        d3.svg.axis - display axes
    

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 create domain in single line?

y.domain([0, d3.max(data, (d) => d3.max(keys, (key)=> d[key]))]).nice()

• How the scaleBand is workin?

Learning the mechanism the scale was positioning the shapes on the svg made the understanding of grouped bar chart easier.

• Debugging the nested g-element translating to the local coordinate of the parent g-element?

g elements acts as a box or container for moving the entire set of shapes on the svg. In the case of grouped chart, the child g used for the combined bar chart was not translating. After analysing the code, I had not converted the population values into numbers after importing the data. After checking the places where the numbers are used, and coercing them to integers the graph renders properly. The function to convert the entering data into numbers is

                function convertNum(d, i, columns) {
                    //d is the rows, i is rowIndex and rows' columns
                    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
                    return d;
                }
            

Next is combining the grouped and stacked chart with transitions!!!