Understanding Scales

We are going to step away from our project for a moment to talk about scales. After we have learned about scales, we will learn how to apply them to our visualizations. It will be much easier to learn about scales separately.

What are scales?

Scales is a simple concept, but the logic behind it is very complicated. Here is how D3 describes scales:

Scales are a convenient abstraction for a fundamental task in visualization: mapping a dimension of abstract data to a visual representation.

That is a good summary if you are already familiar with scales, but that is not very clear to beginners. Let’s break down scales in a simpler manner.

The problem

First, let’s identify the problem. The data we use will not always be suitable for drawing shapes. In the previous lesson, we attempted to position the circles with the weather data. We did not do anything to the data. Unfortunately, that did not work. It was not easy to discern between different circles, and we were left with a lot of empty room on the chart.

It is not uncommon to face problems like these. The shapes we draw need to represent our data. How do we represent temperature, humidity, or any other type of data? We can try using math to calculate better positions and sizes. However, data comes in all shapes and sizes. What might work for one chart may not work for another.

The dataset we have is the weather in New York. But what if we wanted to swap out the data with the weather data for Arizona or California? Our custom math equations might not work for different sets of weather data. Writing out algorithms can become more complex the more advanced a chart is, making it challenging to manage.

The problem becomes compounded when we want to start supporting mobile devices. We live in an age where users will view our sites on various devices. Most sites can adapt to using responsive design.

Let’s take a look at an example.