Building a bubble chart

Although many items in our chart will have correlations with earlier charts that we created in Chapter 3, Creating Cartesian-based Graphs, we will start from scratch. Our goal is to create a chart that has bubbles in it—the bubbles enable us to showcase data with three data points (x, y, and the size of the bubble). This type of chart is really ideal when animated as it can showcase changes over time (it could showcase many years in a few seconds).

A great demo of the powers of bubble charts can be seen in a TED presentation by Hans Rosling (http://blog.everythingfla.com/2012/05/hans-rosling-data-vis.html).

Getting ready

We will start up our project with a canvas setup and skip the HTML end. If you have forgotten how to create it please refer to the Graphics with 2D Canvas recipe in Chapter 1, Drawing Shapes in Canvas.

There are three major steps:

• Creating the data source

• Creating the background

• Adding the chart data info into the chart

How to do it...

Let's list the steps...