# Adding the cloud cover bubbles

Next, we'll add our ring of circles around the outside to represent the amount of cloud cover for each day. We'll also learn something really important about visualizing data using circles.

Next, let's add the gray circles around our chart that show how much cloud cover each day has. As a reminder, this is what our final chart will look like:

The *radius* of each of our circles will depend on the amount of cloud cover.

As an example of how we can use different

dimensionsto visualize a metric (like we learned inModule 6), we could have encoded the amount of cloud cover as the color of each circle, instead of the size. In this case, size works better because we're already using a color scale for our temperatureandour precipitation type. To prevent from distracting the eye with too many colors, we'll vary our cloud cover circles bysizeinstead.

One caveat with visualizing a *linear scale* with a circle's size is that circles' *areas* and *radii* scale at different rates. Let's take a circle with a radius of 100px as an example. If we multiply its radius by 2, we'll get a circle with a radius of 200. However, the circle grows in every direction, making this larger circle cover *four times* as much space.

Instead, we'll want a circle with a radius of 141 pixels to create a circle that is twice as *large* as our original circle.

Since we, as humans, judge a circle by the *amount of space it takes up*, instead of *how wide it is*, we need a way to size our circles by their area instead of their radii. But `<circle>`

elements are sized with their `r`

attribute, so we need a way to scale our radii so that our areas scale linearly.

The *area* of a circle is the *radius* multiplied by π, then squared. If we flip this equation around, we'll find that the *radius* of a circle is the square root of a circle's *area*, divided by π.

This page is a preview of *Fullstack D3 Masterclass*