Sometimes, the order of the data has a certain relevance to the type of information you need to plot, and D3 provides a number of ordinal scales to take care of that.
- [Narrator] Sometimes the order of your data has a certain importance to the type of information you need to plot, and D3 provides a number of scales known as ordinal scales to take care of just that. So let's take a look at how that works. Now the difference between a linear and an ordinal scale is like the difference between an unordered list and an ordered list. When you have values that have some inherent order, you use an ordinal scale. So in a traditional bar chart, the horizontal axis is often used to compare data over things like a period of time, so the relationship between the items is actually important.
D3 provides a number of different ordinal scales that you can use to plot your data. The simplest one is a band scale, and the method for using those is called scaleBand. Now this method allows you to create regular bar charts from data and manage the space in between them. Just like before, we'll need to specify a domain and a range, but then we'll also need to manage a couple of additional methods to control the spacing in between our bars. Now once we set up our scale, we can use some properties and methods available to control properties of the bars like the width of the bars, and in that case, we'll use the bandwidth method.
For more information, check out the documentation for additional info on ordinal scales. Alright, so let's take a look at how this works. So here we're going to add a new variable, and this is going to be called xScale, and just like before, we'll call it the D3 method, and obviously here, we're going to use something else, which will be the method called scaleBand, and to that method, just like before, we're going to pass a domain, and this will just take the entire data.
So we'll just use bardata right here. And then for the range, we'll specify an array of zero, and then the width of the container. So this is the 600 pixel width right here. So once we have that, then we can modify what we are using for the width of the items here. So instead of the barWidth variable right here, we can create a callback and return the xScale method, and we'll use the bandwidth submethod there to get the width of the bands.
That's obviously going to be based on the width of the container here. In addition to that, we'll also need to adjust the x position. We're not going to need this index anymore. And what we'll do here is just return xScale and that d variable. Right if we do that, what you're going to see on your table is essentially all the data being plotted and it's going to sort of fit nicely into the table. There's not going to be any spacing in between the elements, so if we want to adjust that, then we'll need to add some additional submethods here.
One of them is called padding, and into padding we can just put a value. And what that does is adds a spacing at the end and at the beginning, as well as in between. If you want to control the padding a little bit better, you can use a couple of other methods, and those are paddingInner, and I'm going to set that to .3. That will sort of adjust the spacing in between the elements, and then you can also of course do paddingOuter, which will let you adjust the spacing on the outside.
So now we have a different padding in between the items, as well as outside, and you can see that if I add some additional values here, the bar will adjust nicely to our additional data. So the linear scales are pretty useful. Sometimes you need some type of content that requires an ordered relation, and that's what order scales are for, and the simplest one that everyone starts with is the scaleBand, and learning how to work with band scales is going to show you how to work with really any other type of ordinal scales.
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data