1. Skip to navigation
  2. Skip to content
  3. Skip to sidebar

Our Blog

Bubble, bubble toil and trouble

Chris Gemignani

Recently we wanted to show how Concentrate, our new long-tail keyword tool, could give you a view of search patterns across travel websites.
As political junkies, we were inspired by this chart from our friends at the NY Times.


NY Times candidate word bubble chart

The first tool we tried, simply on principle, was Excel 2003. As expected, making a NY Times quality bubble chart in Excel 2003 is a hard problem. Here’s a draft of how far I got before giving in to label fatigue.

Excel NY Times bubble

The bubbles themselves aren’t tough, but getting the labels right is hard. I’d love to see a solution, so if any reader wants to tackle it eternal fame can be yours. Here is a CSV if you want to try.

travelpatterns.csv

Another of the tools we use at Juice is NodeBox, which we used to make this:

Concentrate pattern comparison

Here’s the code that made the graph.

The power of a programmatic approach like this is that by changing a line or two, you can get the following. Click for a larger version. Click the text for the code..

With great power comes a great need to exercise restraint. Otherwise you end up like these poor chaps. Must… flex… restraint… muscles…

Related posts
Topics:
, , , ,
  • Scott Sanders

    It’s far from a full solution, but the XY Chart Labeler might help you get part of the way there: http://www.appspro.com/Utilities/ChartLabeler.htm – I find it indispensable for my bubble and scatter charts.

  • Clint

    Chris, it’s easy enough to mimic the NYT chart with your data in Excel. A couple of custom series to represent labels (e.g. site name and terms), some custom formatting and you’ve got a decent representation. The problem of labels in this case I think is the relative smoothness of the data. the NYT data ranges from 1 to 21 which compared to your sample data which runs 0-100% is a relatively tight grouping so the bubble scales are much more similar. In other words, it was a lot easier for the NYT team to fit labels on their bubbles than it is to do on your data. I’ll post a graphic later on my blog but, I think the acceptable solution is to create a size legend series…

  • Clint

    Scott, in my attempt, I did use x/y chart labeler (a must-have for excel) but that was for custom row and column labels, I don’t think it will really solve for getting the labels onto the buttons.

  • Chris Gemignani

    I’m looking forward to seeing your solution, Clint at blog.instantcognition.com. The challenge I found, was labeling the X and Y axes at all, not to mention tastefully. I’ll be curious to see what you come up with.

  • Clint

    Hey Chris,
    I was about half way through writing the blog post and encountered a lovely BSOD. Too tired to start the post over tonight so here is the URL to the screenshot of my solution:
    Clint's Excel Bubble Chart Solution

  • Clint

    Wow, didn’t think that would actually work.
    In any case, to follow up on my original comment about the smoothness of the data…
    The area of the bubbles in the NYT graphic scale from 1 to 21 which means the diameter has to scale 21x from smallest to largest. For the concentrate data the diameter scales from .5% to 100% – a 200x increase so it’s much harder to make data labels fit into/onto the bubbles and be readable and preserve the integrity of the graphic itself

  • Clint

    one last note … don’t do math when you’re tired. As the above shows (still true, math is just wrong)

  • Robert

    Just wanting to throw SAS’ name in the hat, as another software that can do this kind of “bubble table” graph (with a bit of programming).

    Here’s an example of the output. I’m using gif here, which everyone should be able to easily view. SAS can also output other formats such as svg and 1200-dpi tiff, which make the bubbles look smoother (more “publication quality”).

    http://robslink.com/SAS/democd33/death_odds.gif

  • Chris Gemignani

    Very nice, Robert: It’s a good tip in general about exporting. If your graphing solution doesn’t output antialiased (i.e. lines look smooth rather than chunky) charts, create a higher resolution version then scale it down. A good, free tool on the Windows side for image manipulation is: http://www.irfanview.com/

  • Fabrice

    I just posted an Excel version of the chart based on the UDF I created.
    Here : http://sparklines-excel.blogspot.com/

  • Andy Cotgreave

    I put this together in Tableau:
    http://tinyurl.com/9skr3h

    Wasn’t too sure what your colour was measuring, so I based it on size.

    I tried it with text labels, but the text was too big relative to the bubbles. And I couldn’t force the size variance to be any bigger. I would have liked to be able to make the biggest bubble bigger.

    However, I think it’s okay for 5 minute’s work!

  • Clint

    Andy,
    yes, it’s much simpler in Tableau and while I like your color as value indicator, you could just as easily have the values displayed next to the bubbles instead of ‘on’ them and Tableau keeps it clean.

  • chip

    Rob Bovey has an xy chart labeler that may have helped on the original Excel version. I use it a lot and it provides a good degree of flexibility on placement.

    http://www.appspro.com/Utilities/Utilities.htm

    The labels are not dynamic which is a drawback. It works on other types of charts too.

  • Andy Cotgreave

    Hi Clint,
    Yes, I did initially add the text. However, in Tableau it somewhat overwhelmend the circles. I did try to format the text to grey and shrink it, but the text only served to confuse things.

  • Chandoo

    Hi Chris,

    Good stuff…

    I have tried the same in excel while keeping the labels right (I guess so). You can take a look at the chart and downloadable excel here: http://chandoo.org/wp/2009/01/19/excel-bubble-chart/

    Let me know your comments

  • David Franta

    Didn’t really find another place to post this, but interesting article posted by Cringely (ZDnet fame) about how JP Morgan mangled a bubble chart recently –

    http://blog.cringelysmortgage.com/2009/01/29/whats-wrong-with-wall-street/

  • Mike Chelen

    How about using the Google Charts API scatter plot? http://code.google.com/apis/chart/types.html#scatter_plot
    It allows variable bubble sizes, and has been used in some similar charts such as http://www.xefer.com/twitter

  • Pingback: Cross-Culture Tweets – Week 3 of 2009