How to Visualize Data with JavaScript

Elisabeth takes a look at some examples of visualizations, and talks about the key components of the visualization you'll be building.

It's time to take a closer look at the data so we understand the numbers we're working with before we visualize them. Join Elisabeth as she steps you through the data from NOAA and explains what it means.

Get everything you need to work on this project, including the JavaScript jQuery library and the data we'll be using to create the visualization.

Resources

Get the source CSV data from NOAA: https://www.ncdc.noaa.gov/cag/global/time-series/globe/land_ocean/p12/12/1880-2017.csv

Get the code files (html, js, json): https://github.com/bethrobson/CCC/tree/master/gta

We're ready to build the HTML for the project. The HTML is straightforward: we just need a heading, some elements for the legend, and a table element for the data.

Resources

A guide to using the console in browsers: https://wickedlysmart.com/hfjsconsole

Elisabeth takes a deeper look at the data in gta_data.js: data is an array of arrays of objects. Get a refresher on arrays and objects in Head First JavaScript Programming first if you need to. We'll be iterating over these arrays later, so pay close attention to the structure of the data.

Follow along as Elisabeth makes sure the data is loading properly from the gta_data.js file in the main JavaScript file, gta.js.

She also shows how you can load the JSON data in gta.json using XHR (XmlHttpRequest), jQuery, and JavaScript if you'd like to try that method instead. Either way will work for the project. Just be aware; if you want to load the JSON data using XHR, you'll need to run a web server to serve your pages and the data files. Using gta_data.js is a good alternative if you don't want to worry about doing that.

Before we write the JavaScript code to create the visualization it's a good idea to understand the algorithm we'll be using. Elisabeth walks you through the algorithm so you have a high level understanding of each step before we write the code.

Build the first part of the table with Elisabeth, including creating each table row heading, and assigning a unique id to each table cell so we can use it later when we add the data.

Here is where we add the data to the table from our data array: we're adding the ranking for each month with a data point, the color corresponding to that ranking, and the temperature anomaly value, to each table cell which represents a data point in the visualization.

We're almost done with the JavaScript code for the data visualization. The last piece to add is the Javascript code for the color legend. Follow along with Elisabeth as she adds this final piece of code.

We're done with the JavaScript code. Now, Elisabeth will step you through how to finish the visualization using CSS to style the page. We'll complete the legend and improve the style of the table.

The benefit of visualizing data is that it can help provide insight into the data. In this video, Elisabeth walks through what we can learn from the visualization we've just made.

Resources

Additional graph created by NASA from WikiMedia Commons:

https://www.nasa.gov/topics/earth/features/temp-analysis-2009.html

https://commons.wikimedia.org/wiki/File:NASA_global_temperature_since_1880.gif