This video covers how to create axis using linear scale.
- [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 the elements into the group for us.…
- 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
Data Visualization for Data Analystswith Bill Shander1h 31m Beginner
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?
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.