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 precipitation bubbles"
description: "Next, we learn about ordinal scales and create the inner ring of circles to show the precipitation probability and type for each day."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/ays5zkzea0
codeFolder: course/module_06/lesson_06.07/protected/code/11-radar-weather-chart/end
---

# Adding the precipitation bubbles

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

Next, we want to add a row of bubbles corresponding to each day's precipitation. We have two relevant metrics: _probability_ of precipitation and _type_ of precipitation. Let's visualize the _probability_ with the size of the bubble and the _type_ with the color of the bubble. This way, we can play to both dimensions' strengths -- a large amount of _blue_ will correspond to _a high probability_ of rain. And we won't see a lot of a color if we're not confident that it did precipitate.

To start, we'll create a scale to convert the probability of precipitation to the radius of a bubble. We'll make these circles a little smaller than our cloud circles, since they're closer to the middle of our circle (and thus have less space).

A>This code will go at the end of our **Create scales** step.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=3063 endLine=105 startChar=2929 startLine=103 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.07/protected/code/11-radar-weather-chart/completed/chart.js#L103 }
const precipitationRadiusScale = d3.scaleSqrt()
  .domain(d3.extent(dataset, precipitationProbabilityAccessor))
  .range([1, 8])
```

Next, we'll list out the types of precipitation in our dataset, then create a color scale mapping those types to different colors. We'll want to use an **ordinal** scale, since this is an **ordinal** metric, and can be placed in categories with a natural order (remember the types of data we learned in **Module 6**?).

Next, we learn about ordinal scales and create the inner ring of circles to show the precipitation probability and type for each day.