Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Learn data visualization with d3js 400x277
  • Overview
  • Transcript

3.2 Ordinal and Other Scales

In this lesson, I’m going to explain discrete scales and give an example of how they can be used.

Related Links

3.2 Ordinal and Other Scales

Hi, and welcome back to Learn Data Visualization with D3.js. In this lesson, we are looking at non-continuous scales like ordinals. When you work with data, you might not always have continuous values. In statistics, many data points are categorized into groups, and those groups are usually not continuous. If you remember the example from the first lesson, we looked at the distribution of the letters in the English language. The letters of the alphabet aren't continuous. They are discrete values. Yes, they are ordered, but a isn't smaller than b or otherwise comparable. This data can be displayed using either band or point scale. Band scales should be very familiar because you use them usually with bar charts. And points would represent a scatter plot. Let's have a look at an example. I'm using the ladder frequency again, but I expanded it to also include French and German in it. To get from a single bar chart to a grouped one, I'm going to actually create two band scales. One for the different letters, and one for the languages with each letter. The first one x0 will have an inner padding to divide the groups a little bit, and the domain will be the letter as before. The second one will be x1, and it's going to use the bandwidth from x0 for its width, also with a padding. To set the domain for x1, I need another variable. Let's call it keys, as it will contain a list of languages. The y scale can stay exactly the same. But to make it a little easier on ourselves, I'm using the static value 0.2 as the scale is upper bound in the domain. Finally, we need another scale. I'm calling it the z scale, which will take care of the coloring. It's an ordinal scale, meaning it's ordered and has three colors for its range. I'm intentionally not setting a domain on it, so it will simply cycle through the range's values. In our case, this is ideal since we always have the same order of the values, but it might not be forever use case. We can reference the x's alone. They aren't changing, but I'm going to remove the drawing. Instead of simple rectangle, I'm going to use groups to group the three bars together. Just to distinct them from other groups, I'm going to add the letter clause and select all of them. Instead of setting an x and y directly, I can use the transform attribute to translate the group to the correct position by using the x0 scale. With the scale I want to select all rectangles and replace them with some data. Unfortunately, the data is not yet prepared for us to use it. I'm going to map over the languages, and create an array with a key, which is language, and the value. Since I used capitalized language names, I have to down case it to access the data. Now it's time for the individual bars. Like before, we are going to set the x and y values by getting them from the x1 and y scale respectively. In the case of x1, I'm using the language key, same goes for the fill color that is referenced by this z scale. We also have to set the height. Before we try this out, I want to add one small thing. I want to use the scalable part of SVG's name, and scale the charts to be full-width. To do that, I have to set the width attribute to be 100%, and the height to be unset. Furthermore, I have to add the viewBox attribute on the element itself. This is the virtual coordinate space, regardless of the extra size of the element. I'm going to keep the width and height attributes on the elements themselves and set them to the same as our viewBox values. So they can be referenced by this JavaScript pre-load. They will get reset during render. And here's the finished example. We have the three colored bar charts that I grouped together nicely. Besides continuous and ordinance scales, there are few in-between my variations. I've already mentioned them while talking about statistics. You have quantized and threshold scales that map values into discrete groups like putting them into buckets. Here's an example that shows the unemployment rate in the US by county. As you can see, it is mapped into buckets 2% each. You also have a quantile scale which divides the range into a number of groups. For instance, a four quantile is also called quartile, which divides the range into four groups like 0 to 25%, 25 to 50, 50 to 75 and 75 to 100%. Other than quantized scales, quantiles can't be divided into unequally sized groups. With that, you know all about the different types of scales D3 has to offer. Let's recap what you learned in this lesson. Band or point scales are used for discrete values that can create bars and lines. Ordinal scales are ordered discrete scales. A grouped bar chart can be created by using multiple band scales together. Quantize, threshold and quantile scales are mapping continuous values into discrete groups. In the next lesson, I'm going over axis and labels. See you there.

Back to the top