This video covers how to get our axis where we want it using group.
- [Narrator] In the last section,…we added an axis and positioned both the chart and axis…together within a group.…In this section, we're going to see all the elements…that make up the axis.…And through doing that,…we're going to learn how to style the axis,…if we wanted to.…So let's take a look at the DOM.…And if we just refresh the page,…that will take us to root level,…and then svg, and that's our chart group.…Here we have the path, which is the area chart.…And here we have the group, which is the axis.…So our line of code said append group…and then run this axis generator for us.…
And everything else that you see here…has been done very kindly by D3.…One thing to note at this high-level group…which contains all of the elements of the axis,…is this thing here,…we've got text anchor equals end.…And what that does, as we've seen in previous sections,…is if we take the number 20 here,…that tells the browser…that it's this right-hand side of that label…that should all be neatly lined up.…If we had chosen axis right instead of axis left,…
- 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.