Search code examples
dynamicscatter-plotc3.jsbubble-chart

c3 charts dynamic bubble size in scatter plot, wrong index

I'm trying to make a chart like this one with c3.js.

For the bubble size I create an array for each "continent" holding the population as a factor to increase the bubble size. Also the country name is stored in the same manner.

When adding the data points to the chart as well as when adding the bubble sizes/country names to the array, the indices are the same. E.g. col_2[0] in the bubbleInfo array is "China". Also in the data columns col_2[0] and col_2_x[0] are 76 and 12000 which are the values for China.

However, in the section where I dynamically get the bubble radius/country name, the index I get from the function parameter is not the one of the col_2 arrays. Instead I get the index in the order in which the dots are spead along the x-Axis.

E.g. I add for x-Axis China (12000), India(5800), Indonesia(9000) in this order. I'd expect to get index 1 for India, but I get index 0, because 5800 is the lowest of the x values. Because of that I cannot properly map the indices on the bubble sizes/country names, since the indices are wrong.

Is this a bug and if so, how can I properly map the bubble sizes/country names then?

Here is the JSFiddle:

var chart_3_bubbleSize = {
    "col_2": [10.0, 9.0, 3.9, 2.5, ],
    "col_1": [3.0, 2.5, ],
    "col_3": [2.5, 5.5, ],
};
...
var chart_3_bubbleInfo = {
    "col_2": ["China", "India", "Indonesia", "Japan", ],
    "col_1": ["Russia", "Germany", ],
    "col_3": ["Mexico", "USA", ],
};
...
columns: [
            ['col_2', 76, 66, 71, 86],
            ['col_2_x', 12000, 5800, 9000, 36000],
            ['col_1', 72, 80.4],
            ['col_1_x', 25000, 40000],
            ['col_3', 76, 78],
            ['col_3_x', 16000, 50000],
        ],
...
 point:
    {
        r: function(d)
        {
/*d.index gives the index according to the order along the x-axis, which leads to wrong result, when trying to map to country names/bubble sizes*/
            return 2 * chart_3_bubbleSize[d.id][d.index];

        }
    },

https://jsfiddle.net/51oLxqyt/1/

The first green bubble in the lower left corner should be India, but it has the label "China" and the bubble size of China, because China is at index 0 in the bubbleInfo and bubbleSize arrays.

Solution

  • There is an not documented attribute data.xSort = false, which keeps the original index, which makes it possible to map more dimension e.g. for scatter charts. More info here: https://github.com/c3js/c3/issues/547#issuecomment-56292971