This video covers how to add an axis using time scale.
- [Instructor] Now we're going to add an X axis based…on our X scale.…So we can delete that console log thing…that we had there.…And we'll keep our structure…by popping it under here.…And it's as straight forward as it was before.…For X axis, D3 dot axis, bottom.…The scale is X.…And that's all we need.…Now that won't run until we call it…so we're going to call it down here.…Chart group append g.…We'll give that a class attribute.…
There ya go.…Class, axis X.…And then we call our axis generator…which is X axis.…And then we check and refresh…and low and behold we have an X axis.…Now it's not where we wanted it…but it is there and beautifully formatted…as I'm sure you'll agree in purple and blue.…So the X axis has been positioned at zero zero.…So why isn't it showing up here…which is the zero zero location of the page?…And that's because we've added the X axis…into chart group and chart group has been transformed.…
50 pixels rightwards and 40 pixels downward.…So although the X axis defaults…to a position of zero zero,…it has in fact been shifted…
Author
Released
10/28/2016Start off with a review of HTML, CSS, and JavaScript—some basic coding skills you need to use the D3 library. Then learn how to make a simple bar chart and create basic shapes and text. Emma also introduces the path function and the power of generators for drawing more complex shapes. Then find out how to pull in JSON, XML, and CSV files to create more complex graphics such as tree and Voronoi diagrams, and manipulate your data for advanced graphics using map, stack, and nest functions. The course wraps up with tips for adding interactivity and picking the right graphic for your data.
- Reviewing HTML, CSS, and JavaScript basics
- 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
Duration
Views
Related Courses
-
Data Visualization for Data Analysts
with Bill Shander1h 31m Beginner -
Learning Data Visualization
with Bill Shander3h 41m Beginner -
D3.js: Data Visualization
with Ray Villalobos3h 20m Intermediate
-
Introduction
-
Welcome58s
-
Explaining D32m 51s
-
What you need to know2m 4s
-
-
1. Refresher
-
Introduction30s
-
Recalling HTML basics4m 9s
-
Understanding HTML53m 18s
-
Introducing SVG2m 38s
-
Recalling CSS2m 16s
-
Combining Javascript and D32m 30s
-
-
2. Making a Simple Bar Chart with D3
-
Introduction36s
-
Adding an SVG2m 16s
-
Adding rectangles3m 56s
-
-
3. Basic Shapes, Courtesy of SVG
-
Introducing SVG shapes1m 52s
-
Drawing circles3m 50s
-
Drawing lines9m 39s
-
Adding text10m 18s
-
-
4. Advanced Shapes, with D3 and Path
-
Introducing path2m 21s
-
Explaining generators7m 28s
-
Drawing an area chart4m 35s
-
Finding other generators2m 28s
-
Introducing groups8m 45s
-
-
5. Scales and Axes
-
Introducing scales3m 10s
-
Creating a linear scale3m 11s
-
Creating a linear axis5m 57s
-
Creating a time scale5m 9s
-
Creating a time series axis3m 24s
-
Using colour scales5m 17s
-
Introducing other scales2m 20s
-
-
6. Importing Data into D3
-
Parsing a CSV file5m 10s
-
Using TSV and DSV5m 51s
-
Parsing JSON3m 29s
-
Parsing and mapping XML4m 23s
-
Parsing a TXT file5m 2s
-
Parsing HTML2m 55s
-
7. Additional Graphics with D3 Layout
-
Making a tree from JSON7m 26s
-
Introducing other layouts3m 18s
-
8. Preparing Your Data for Advanced Graphics
-
Prepare stack data using map12m 10s
-
Drawing a stack area chart5m 30s
-
Advancing selections10m 5s
-
9. Interactivity
-
Introducing dispatch4m 10s
-
Transitions4m
-
Dragging and zooming5m 48s
-
10. Picking the Right Graphic
-
Time series6m 7s
-
Text1m 21s
-
Hierarchy3m 44s
-
Geography1m 5s
-
Distribution2m 20s
-
Other54s
-
Conclusion
-
Finding plugins2m 33s
-
Using the API reference2m 23s
-
Summary20s
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Creating a time series axis