Creating our scales in React
Next, we need to create our scales. We also create scaled accessor functions to pass to the children of our Timeline, so they don't need to know about our scales.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:43] So our next step is creating our scales. So for scales, these will be pretty timeline specific. So let's go back to our timeline.jsx component and right after we create our dimensions, we can go ahead and create our scales. So for the timeline, we'll need an x scale and a y scale. And it's gonna look very similar to what we've done before. So x scale, it's gonna be a time scale scale time. And then this is gonna need a domain and range.
[00:44 - 03:22] Range. Alright, so for our domain, we're gonna want to find the top and bottom values for our y-accessor. So we can just use d3 extent, pass in that data and pass in that x-accessor. And then for the range, it's gonna go all the way from zero to the width of our bounds. So zero to dms.bounded width. And then our y scale is gonna be very similar. Let's go ahead and create that y scale. It's not gonna be a time scale, it's gonna be a linear scale. And then instead of our x successor, we want to pass the y-accessor. And it's gonna be from our height of our bounds all the way down to zero. And something that might just be nice is to use that nice function to give ourselves rounded like a more friendly axis and have an end on a more round number. So our axes look a little bit nicer. And then the last thing we want to do is to scale our accessors so that if we're drawing a line, we can pass that scaled accessor which kind of has that scale in mind. Instead of this x-accessor which just passes back that x value in the data domain, we want to pass it back in the physical domain. So that anything that we use this with doesn't need to know about our scales, it just needs to know how to get from a data point to the x or y value. So we can create an x-access or x-accessor scaled. And that's just taking in this data point. And it's passing back the scaled access data point. And we want to do the same thing for that y- accessor as well. And so hopefully you can start to see how we can make the things we learned a little bit more generic and also a little bit more custom in a way. So maybe you like this scaled accessor pattern and you might want to use it in your own chart library or maybe you don't like it and you don't have to use it.
[03:23 - 03:40] So we're kind of just taking everything we learned and thinking through, okay, we want a timeline, what are the things the timeline needs to do and how can we apply what we've learned to make this timeline appropriately generic for our own applications.