This video covers how to create a time scale.
- [Instructor] Now we're going to add an X scale…for our time data,…which is in data years.…Before we get started on that,…we're going to make one small change…to our Y scale,…which we have here.…You see that we have written in 119 manually here.…And what we're going to do is we're going to…drive this dynamically from our data…by using a function called max.…So we're going to replace it with d3.max,…and the maximum we want is dataArray.…And if we save that, and check it,…you see it works perfectly well.…
If we were to log that to the console,…it would output 118.…That's going to be useful,…because we're going to use that again shortly…for the X scale.…So one thing to point out before we start…is that we're going to use the array dataYears…to drive our X scale.…But these are all strings.…They're not formatted as dates in any way.…They're surrounded by quotation marks…and therefore they're text.…We're gonna deal with that shortly.…For now, let's declare x, var x = d3.…And this time we're using scaleTime.…
Just like before, we need domain and range,…
- 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.