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, 2015 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, 2015 at 14:14

2 Answers 2


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, 2015 at 9:09

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

<div class='cartodb-legend bubble'> 
  <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>

You get something like:



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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