Colors in dc.js charts not linked with each other

Question

I have a choropleth(world map) and a bubble chart in dc.js. The colors in the bubbles and the map should be the same (country wise). On selection of a country, the filtered bubble should have the same color as of the map because the map and bubbles are linked with the same country.

How am i suppose to achieve it.

Any suggestion will be helpful.

Thanks in advance.

Answer 1

You should be able to set the same color scale for all the charts, as long as the keys (country names) are the same across charts.

EDIT: because of the limitations below, probably the best approach is to use a custom reduce function that produces an object or tuple. Something like (untested):

that.countrywiseInvGroup = that.countries.group().reduce(
    function(d, p) {
        p.inv += d.initial_inv;
        p.country = d.country;
        return p;
    },
    function(d, p) {
        p.inv -= d.initial_inv;
        return p;
    },
    function() {
        return {inv: 0};
    });

// ... 
 .colorAccessor(function (d) {
     return d.country;
 })
 .title(function (d) {
     if(d.value){
         return "Country: " + d.key + "\nTotal Initial Investment: USD $" + that.formatCurrency(d.value.inv);
     }
 })

```