0

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.

Ronak Bhandari
  • 328
  • 1
  • 3
  • 15

1 Answers1

2

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);
     }
 })

```

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • The dimension and group passed in the choropleth is the price. How do i get the country name in the colorAccessor()? – Ronak Bhandari Jun 05 '14 at 07:51
  • Having trouble understanding what you mean here. If your cloropleth is currently assigning color by price, how could it also assign color by country? Perhaps you need to define the dimension or group differently so that the value is country. Posting a fiddle, or at least code, would help. – Gordon Jun 05 '14 at 19:59
  • http://pastie.org/9263435 contains the code. Actually, i want the price and the country name for the title and the country name for the colors. Currently the color is according to the price but that will not be the actual case. The colors needs to be according to the country name. – Ronak Bhandari Jun 06 '14 at 07:55
  • I have currently applied a hack but that only works on first load and the colors changes on filter. Btw thanks for looking into my requirement.. – Ronak Bhandari Jun 07 '14 at 06:43
  • Can't you just use a colorAccessor that looks at the key e.g. `.colorAccessor(function(d,i) { return d.key; })` ? – Gordon Jun 08 '14 at 01:50
  • .colorAccessor() and .colorCalculator() both gives only the value as integer in d and not the key-value object. Whereas for bubble chart it gives the key-value object in d. – Ronak Bhandari Jun 08 '14 at 06:25
  • that's annoying! okay, it sounds like your best way forward is a custom reduce function. added example above. – Gordon Jun 08 '14 at 17:07
  • Hey:) that worked but partially. I am getting all the attributes in the colorAccessor but country is undefined. Is it a small fix that i need to make? – Ronak Bhandari Jun 09 '14 at 05:54
  • As I wrote, this is untested. Please put breakpoints in the reduce functions to see what is going wrong. The idea is that the first time the add function (the first one) is called, it will set the country attribute. And all the records reduced should have the same country. Probably not the best way to implement this but it's what came to mind. – Gordon Jun 09 '14 at 18:53
  • Hey thanks for your attention and all the help. Successfully achieved it. The problem was p.inv in not defined initially and so was giving undefined. – Ronak Bhandari Jun 11 '14 at 08:53