Selecting Your Chart Type
The first step in our process was to determine what we wanted to visualize. We were interested in showing how teams fare in the NCAA tournament based on their seed. So we decided we would chart advancement and seed. But this left us with a lot of bubbles that overlapped each other so completely they were covered up!
To address the overlapping issue, we considered data for the Y axis that would spread out the team bubbles. One data set that met this need was conferences: with 32 conferences represented in the tournament, that would help spread out the bubbles for each team.
Color in Web Charts
A fun side note, we used Adobe Kuler to choose our color palette based on the tournament branding. We added the colors with their “create from image” tool.
This is a good time to mention that color selection is an important part of any visual project. Close variants on a hue can be difficult for some users to differentiate, and certain colors may not be distinguishable for color blind or other differently affected users.
Styling the Bubble Chart
With JSON Attributes
After setting up our chart, we found a few team bubbles that were still covered up. We used the offset-x attribute to nudge them over a bit and make them visible.
With a large data set of 64 teams, one usability issue with the bubble chart is displaying it with large enough dimensions for the users’ eye to make sense of things. To address this, we did two things:
We made the chart on it’s own page, rather than embedding it in our narrow blog margins.
We added hover tooltips to show more information about each bubble. You can also use tokens to add information to your tooltips.
Have you made any bubble charts of note? Found any cool styling tricks you’d like to share? Let us know in the comments below.