Loading the weather dataset
First things first, we learn how to load our dataset and look at the structure.
The first step to visualizing any dataset is understanding its structure. To get a good look at our data, we need to import it into our webpage. To do this, we will load the JSON file that holds our data.
D3.js has methods for fetching and parsing files of different formats in the d3-fetch module, for example,
d3.xml(). Since we're working with a JSON file, we want to pass our file path to
Let's create a new variable named
dataset and load it up with the contents of our JSON file.
drawLineChart()function declaration is preceded by the keyword
Don't be overwhelmed by the words Promise, async, or await — this just means that any code (within the function) after
await d3.json("./../../my_weather_data.json")will wait to run until
If you see a
SyntaxError: Unexpected end of JSON inputerror message, check your
my_weather_data.jsonfile. It might be empty or corrupted. If so, re-generate your custom data or copy the
Looking at our data#
Going back to our code, let's log our dataset to the console. We can do that by adding the following line of code right after we create our
We can see that our dataset is array of objects, with one object per day.
Since each day seems to have the same structure, let's delete the last line and instead log a single data point to get a clearer view.
We can use
console.table()here, which is a great function for looking at array or object values — as long as there aren't too many!
We have lots of information for each day! We can see metadata (
summary) and details about that day's weather (
temperatureMax, etc). If you want to read more about each metric, check out The Dark Sky API docs.