From the course: D3.js Essential Training for Data Scientists
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Creating a linear axis - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Creating a linear axis
- [Instructor] So now we can define our first axis generator. The axis generator uses a scale to add and position elements on the page. And this terminology has been hugely simplified in version four. So all we do now is var yAvis equals d3.axisleft(y) And that y that we're using there refers to this variable here. So if we had called that cabbages we would be writing cabbages in there. And that's it, we've declared a generator. Now the generator isn't going to run unless we call it, which we'll in a moment. There are four types of axis in d3, axis left, axis right, axis top, axis bottom. And the left and the right part, just tells d3 where to put the labels relative to the line. Should the labels pop up on the left hand side of line or the right hand side of the line. And the same goes for top and bottom. So it's not about positioning the axis on the web page, as we'll see. To add the axis, what we need to do is add a group element then call the axis on that group. D3 then adds all…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
Introducing scales3m 10s
-
(Locked)
Creating a linear scale3m 11s
-
(Locked)
Creating a linear axis5m 57s
-
(Locked)
Positioning and formatting our axis5m
-
(Locked)
Creating a time scale5m 9s
-
(Locked)
Creating a time series axis3m 24s
-
(Locked)
Creating an ordinal scale and axis5m 53s
-
(Locked)
Using colour scales5m 17s
-
(Locked)
Introducing other scales2m 20s
-
-
-
-
-
-
-