Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Continuous Scales

There are a lot of charts that use continuous scales to show data that can have any value in a range. In this lesson, I’m going to show you one of them and explain scales in more detail. You’ll also get an introduction to D3’s interpolate module.

Related Links

3.1 Continuous Scales

Hi and welcome to Learn Data Visualization with D3.js. In this lesson, I'm going to talk about scales, more specifically, linear, logarithmic scales and the like. Before we have a look at specific scales, I have to talk about a few general things. If you remember the example from the first lesson, you might remember domains and ranges. A domain describes the range of input values of a scale using continuous scales does normally consist of lower and upper border. But depending on your used case this scale could also be divided into multiple parts like from minus 1 to 0, and then the 1. Why is this useful? Well, let's talk about ranges. A range is the output mapping of the scale. This is essentially the transformed result data you are going to work with when drawing your graphs and charts. Other than domains, ranges don't necessarily have to be numeric for a continued scale. So let's answer the question why multiple sections of the domain might be useful. Because you can use this to map the range values. Since range mappings don't have to be numeric, we could for instance use a color band to display temperatures. Since this doesn't necessarily need to be between two colors, we can use those sections as separate transitions from red, to green, to blue for example. If an interpolation is too complex to be described by simply using domain and range, we can use an interpolator to do the mapping. There are interpolators for different color transformations, dates, CSS transforms, and so on. And if even that doesn't cut it for your data, you can simply provide your own. If you get outliers, data points then are not within your defined domains, D3 will automatically extrapolate their values. So if you have a domain from 0 to 100 and the range from zero to 50, an input value of 110 will be mapped to 55. Sometimes this is okay but if your visualization doesn't support that, you can enable clamping. This will limit outlines to the defined range. Now let's look at examples of different scales and the usage areas. The following are scales with continuous input and continuous output. I'm going to start with a classic linear scale. It is probably the most widely used of all scales. You can charge stock data and all other kinds of measurements. Logarithmic scales on the other hand are used if there is a huge range of values. For instance earthquake strength, loudness or light intensity are measured and displayed in logarithmic scales. Similar to logarithmic scales, are scales to a power of a square root scale, which is useful for areas. They both are non linear scales. Another very useful scale is the time scale. It's very helpful on dealing with time series data. The scale itself is very similar to the linear scale but it deals with data instead. Finally, the last continuous scale is a sequential scale. This is very useful if you want to interpret data with with either custom function or interpolator. D3 offers many presets for color interpolators like rainbow, magma, cool and warm. Let's have a look at a very simple example. It's an arbitrary set of data points from an imaginary company where the profit margin in percent has been calculated for different number of orders. We want to draw a line that displays the change of profit with the number of orders. I've taken the file from the first lesson as basis, so let's set up the x-axis. It's going to be a logarithmic scale. It is used when small values in your dataset might be compressed too much to be noticable. Actually, let's start with a linear scale and change it afterwards so you can see what I'm talking about. We are looking at our order data we consider it's beneath 10,000 orders. Some setting might domain to be between ten and 10,000. I'm not putting 0 there because am already accounting for the fact that we are changing to regulate mixed scale later and log 0 is not defined, so it has to be greater than 1. The second scale is a linear scale that will represent the profit margin. And here I'm using the d3.max helper to get [INAUDIBLE] Value in the dataset which will be the upper margin. Let's adapt the axis draw commands a little bit. I'm going to add a text element to the bottom axis to display the orders. It can take the label from the left axis, and just remove the rotation, and move it below the axis. The left axis is fine. I just need to change the text from frequency to profit margin. So let's draw the line. It's going to be a simple path since we are treating the data as one piece, we don't have to call data this time but the rather datum. I'm also going to add a class of line to the element. Finally I need to set the d attribute which is going to be the draw commands for the graph to the output of d3.line. The function will generate the correct draws for the line graph to set the x and y values. It has corresponding functions we can set. For the x value, I want to pass in the number of orders to the x scale, and for the y value I'm passing the profit margin to the y scale in the same manner. Before we can have a look, there's some styling to do. The line crossed doesn't have any fill, but it's going to have an orange stroke. Let's have a look at the result. You can see a big hump in the graph, where it quickly climbs in the beginning and then tops out later. This is a typical site for logarithmic values. Let's change the scale to logarithmic Now it's almost linear but you might notice that the bottom axis looks strange. When using logarithmic scales the labels default to scientific values. You can also see that the text got closer together two variables labeled 1e. This is also a sign for logarithmic scales. Let's format the axis a little bit. I'm going to add a call takeFormat on the axis and dedicate it to x.takeFormat. The first argument is the number of labels, it should generate and the second is a specify. In our case we call d3.format and passing column D, which means a decimal with a 1000 separator. It doesn't really matter what you put there, since it always outputs, values that are ten to the power of x. Now it looks much cleaner, but the tick marks might still be irritating. We can remedy that by setting the number of ticks to three. This will output only the values we labeled. Let's do a recap of the lesson. Continuous scales map continuous input data to continuous output data. There are different types of linear, nonlinear, and sequential scales that map data to best represent it on a chart. The input domain defines boundaries of input values, and the range that are boundaries of output values. The mapping happens between those. If there are outliers D3 can either extrapolate or clamp the data. Input values have to be numeric. Output values can also be other values like colors. In he next lesson we are going to have a look at discrete scales. See you there.

Back to the top