Time-based guides are a little different and more complicated than regular guides, you create them with the scaletime method and have to use date based domains with special tick properties.
- [Narrator] Time based guides…are a little different and more complicated…than regular guides, so let's dig into how they work.…The method for time scales is called scaleTime(),…and of course, it's going to be a little bit different…from other scales in that it expects…a date based, or time based, domain.…That's perfect for our purposes,…because we're creating a chart…that displays different temperatures over time.…Because of that, we can use…a few special properties to create our ticks.…That's a little bit different than what we did before.…
And just as before, we're going to group elements together,…so that they're separate from the main chart,…as well as any other guides.…So let's take a look at how this works.…The first thing I need to do is create a special array,…to hold the values for my dates.…I'm going to go ahead and hide this sidebar right here,…just so we can see everything a little bit better.…And then right here, where I push the temperatures…into their own array, I'm also going to push some dates,…
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data