Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Adding the cloud cover bubbles"
description: "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."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/vcrsulwjiw
codeFolder: course/module_06/lesson_06.06/protected/code/11-radar-weather-chart/end
---

# Adding the cloud cover bubbles

<CodeSandboxEmbed
  src="//codesandbox.io/s/wz0ln?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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:

![Radar Weather Chart](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.06/public/images/11-radar-weather-chart/finished.png)

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

A>As an example of how we can use different **dimensions** to visualize a metric (like we learned in **Module 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 temperature _and_ our precipitation type. To prevent from distracting the eye with too many colors, we'll vary our cloud cover circles by _size_ instead.

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.

![Circle example](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.06/public/images/11-radar-weather-chart/areas-2.png)

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.

![Circle example, part 2](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.06/public/images/11-radar-weather-chart/circle-area.png)

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 π.

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.