Step 1: Access data
We talk through our first step: accessing our data.
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:06] All right, so let's dig in. So that first step as we were looking at the checklist is to access our data.
[00:07 - 00:26] So as we did in the last lesson, we're going to grab our data from this MyWeatherData.json file and save it to a variable called data. So const data equals, and then we're going to need to await because this response might take a while, and we don't want to continue with our code until we have that data.
[00:27 - 00:36] Then we use d3.json and passed it the path to our file. So this is MyWeatherData.json.
[00:37 - 00:43] Now let's just look at it. So console log, let's grab that first point of our dataset.
[00:44 - 00:57] So this is the first day in our data, and we again want to look at the humidity and the dewpoint. So we can see both of the keys here, and it's going to be really straightforward to grab these.
[00:58 - 01:09] So let's create our accessor function. So const x accessor equals, and then we're just going to grab the dewpoint.
[01:10 - 01:19] Let's do the same thing with the y accessor. Then on the y-axis, we want humidity.
[01:20 - 01:40] We're grabbing that from any data point that gets passed to these accessor functions. So let's grab this console log statement and just log out the value grabbed from this first data point by x accessor.
[01:41 - 01:56] -1.67, so that makes a lot of sense. That's the dewpoint of our first day, and then let's just double check our y accessor. The humidity of 0.54 looks absolutely correct, so now we're ready to go into the next step.