2

I have been trying to display two values simultaneously i.e. one absolute value displayed by bubble size (as with layer wizard: bubble) and one relative value displayed by color (as with layer wizard: chloropleth). (Adding to longitude and latitude these are four dimensions I want to visualize.)

See http://visage.co/data-visualization-101-bubble-charts/ for examples of bubble maps.

I have now managed to combine the CSS for a bubble layer (marker-width) and the CSS for a chloropleth layer (marker-fill). However I fail to adjust the legend to indicate both dimensions.

choropleth + bubble visualization

Is there a way to do this with CartoDB?

The thumbnail for Torque Cat in the Map layer wizward shows bubbles unequal in size and color, but I don't see how this could serve my purpose.

  • Usually such maps actually have to different legends or sections within the legend - one that shows the size value as depicted in your example, and one that shows the color values independent of size. I have no idea how to do that in CartoDB (or if it would allow two legend elements in the same map), but it might suggest what to investigate. – Chris W May 25 '15 at 19:09
  • 1
    @Chris W, I know that such maps usually have to different legends or sections within the legend. That's what I am missing. My question was: is there a way to do this with CartoDB? – marianoju Aug 22 '15 at 14:14
2

Something that I use often is to add a gradient background to the bubble circles in the legend:

<div class='cartodb-legend bubble'> 
 <ul>
  <li>
  1.46
  </li>
  <li class="graph" style="background: linear-gradient(to right,rgb(253, 141, 60), rgb(252, 78, 42), rgb(177, 0, 38));">
    <div class="bubbles"></div>
  </li>
  <li>
  18.5
  </li>
</ul>
</div>

You get something like:

legend

3

Thanks, @iriberri! I did not know it is possible to edit the legend's HTML and CSS. However I decided not to add a gradient to the bubbles in the legend, since this would mean mixing up to different value ranges. In my case the color is independent from the size of the bubble for each data point, and vice versa.

I have found a way to display both value ranges in one legend. The code is to long to paste it here, but you can have a look at this pastebin.

Screenshot of map with two sections in legend in bottom right corner

  • Nice approach too! mine was very hacky :-) – iriberri Aug 25 '15 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.