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 freezing"
description: "To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below freezing."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/5jftrknshe
codeFolder: course/module_06/lesson_06.03/protected/code/11-radar-weather-chart/end
---

# Adding freezing

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

Let's ease into drawing our data elements by drawing a `<circle>` to show where _freezing_ is on our chart. We'll want to write this code in our **Draw data** step.

We can first check if our temperatures drop low enough:

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=4975 endLine=170 startChar=4920 startLine=170 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.03/protected/code/11-radar-weather-chart/completed/chart.js#L170 }
const containsFreezing = radiusScale.domain()[0] < 32
```

To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below freezing.