This video covers the concept of scales, using diagrams.
- [Narrator] Now that we've got groups under our belt, we will soon be able to use D3's built-in axis generators. You can build axes manually, if you'd like, but the automatic ones save a lot of time. D3 will draw the axis line, the tick marks, and the labels dynamically from the data, spacing everything neatly for us. D3 arranges all these elements in groups. If the data change, your axis updates. Even if you go from annual data to daily data, D3 will cope. In fact, D3 axes can show dates, text, or numeric data.
You can format the various parts of D3 axes any way you'd like, too, so really, there's no reason not to. Before we can make an axis, we need to understand about scales. So far we've supplied the raw data to D3, such as our array of five, 11, and 18, and then multiplied it by 15 or something, to make it the right sort of size on the web page. But we don't want to have to work out a multiplier every time we draw a chart. Scales will do this for us. Scales have domains, or inputs, and ranges, or outputs.
Let's say our data set contains financial debt data, and we need to use a linear numeric scale. The smallest debt is zero on the left, and the largest is 10,000, and since this is real-world data, there are units. In this example, the units are dollars. The domain can accept negative values, even though it isn't here. So this is the domain of our scale, our input. Think of it line a number line, if you can remember those. Possible values run from left to right, from naught to 10,000.
Most charts need two domains: one for the x-axis, and one for the y-axis. This looks like it's going to be y-axis data, to me, anyway, because the x-axis is usually dates. Next we have the range. Range is D3 speak for output. The range describes the height or width available for our chart on the web page, so the range is always in pixels. Range cannot be negative, because a negative height would be meaningless. As with domain, most charts would have two ranges: one for the x-axis, and one for the y.
Let's say our domain here is for the y-axis. Then this range tells us that the y-axis is 300 pixels high. As with the domain, the range can be thought of as a number line, running left to right. All the scale does is works out the appropriate multiplier for our data. It's going to tell us that a debt of 3,500 dollars should be plotted at a y value of 105 pixels, for a linear scale. To work out the multiplier, the scale needs four bits of information: the minimum and maximum values from our data, and the starting and ending pixel position where we want the chart.
One final thing: do you remember when we made our first bar chart? The bars were upside down to begin with. That's because web pages draw their elements top down, but we read charts bottom up, so we had to invert our y-position. For this reason, we normally match the minimum value of the domain against the maximum value of the range, and vice versa. It saves having to subtract y values from a height later.
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.