This video is available to students only

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:

Radar Weather Chart

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

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

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

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

area and radius formulas

This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.