Bubble Chart with Chart.js

TODO: Match formatting above

Bubble charts are similar to scatter plots. The size of each dot (marker) is used to represent an additional dimension.

In the demo below, the bubble chart shows the relationship between median household income (x-axis) and test performance (y-axis) in 6 school districts in Connecticut. The size of data point (marker) corresponds to the number of students enrolled in the school district: bigger circles represent larger school districts. Upload data to CSV fileā€¦

Figure 11.6: Interactive bubble chart with Chart.js. See detailed instructions on GitHub.

Tip: Use semi-transparent circles

Data points may obstruct each other. To avoid this, play with color transparency. For example, rgba(160, 0, 0, 0.5) is a semi-transparent red in RGBA color model. The a stands for alpha, and is a number between 0 and 1, where 1 is solid, and 0 is completely transparent. Using transparency, you will be able to see data points that are hidden behind bigger neighbors.

Going beyond three dimensions

To show more than three dimensions in bubble charts, one can:

  • color each data point differently to show fourth dimension, eg use shades of red and green to show 5-year trend in test performance;
  • use different icons or glyphs to display fifth dimension, eg circles for male students and squares for female students.

Remember not to overwhelm the viewer and communicate only the data that are necessary to prove or illustrate your idea.