From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Creating a linear axis

Creating a linear axis - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

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…

Contents