From the course: D3.js Essential Training
Unlock this course with a free trial
Join today to access over 24,900 courses taught by industry experts.
Creating a time scale - D3.js Tutorial
From the course: D3.js Essential Training
Creating a time scale
- [Narrator] Now we're going to explore creating a time or date-based axis. And to do that, first we have to create a time-based scale. Dates can be tricky in any language. And in this video, we'll explore how to handle them properly using a new type of scale called scale time. You can see that I have updated the data object. So instead of a numeric value for day, previously this was 012 and so forth. We have dates, but they're strings. So if we were to try and refresh our page, it's going to throw us an error because it can't make any sense of the days. It's trying to make a path data and it can't even work out where to put the virtual pin to start with, which is fair enough. So let's set about making a timescale now using this data, and this is going to be for our X axis, so we're going to make an X scale and that's called scale time like so, and it has a domain and a range. Now with the Y scale, our inputs, our input went from zero to the maximum because we generally read charts…
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
-
-
-
-
-
-
-
(Locked)
Introducing scales3m 40s
-
(Locked)
Position elements with a linear scale5m 51s
-
(Locked)
Creating a linear axis6m 8s
-
(Locked)
Positioning and formatting our axis7m 29s
-
(Locked)
Creating a time scale7m 33s
-
(Locked)
Creating a time series axis6m 10s
-
(Locked)
Creating an ordinal scale and axis11m 16s
-
(Locked)
Using color scales13m 36s
-
(Locked)
Challenge: Add Fahrenheit scale1m 18s
-
(Locked)
Solution: Add Fahrenheit scale3m 6s
-
(Locked)
-
-
-
-
-