IT & Software
Other
JavaScript
How to Visualize Data with JavaScript
4.9 (17 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
280 students enrolled

How to Visualize Data with JavaScript

Visualize Trends in Temperature Data with HTML, CSS, JavaScript and jQuery
4.9 (17 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
280 students enrolled
Created by Elisabeth Robson
Last updated 1/2020
English
English [Auto]
Preview this course
How to Visualize Data with JavaScript
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 1 hour on-demand video
  • 5 articles
  • 5 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • JavaScript, visualization skills, HTML, CSS, jQuery
Requirements
  • JavaScript basics, HTML and CSS basics
Description

Welcome to How to Visualize Data with JavaScript. In this project, join Elisabeth Robson to learn how to incorporate data visualization into your web skills using simple JavaScript along with HTML and CSS. Elisabeth will take you through building an interactive visualization using data downloaded from NOAA, reading data into a web page, adding the data to an HTML table with JavaScript code, adding color to the visualization with JavaScript and CSS, and using a little jQuery to help make selecting and updating elements in the page easy.

Pre-requisites

To successfully complete this project, we recommend that you have some background in HTML, CSS, and JavaScript. You don't need to be an expert by any means, but you should have experience building web pages with HTML and CSS, and you should have basic programming skills with JavaScript.


Learning Path

  • Head First HTML and CSS

  • Head First JavaScript Programming (Chapters 1-6)

  • How jQuery Works: The Basics

  • This course: How to Visualize Data with JavaScript


Who this course is for:
  • Developers who want to practice their JavaScript skills, and use JavaScript to create visualizations.
  • Developers interested in climate change, and visualizing climate data
Course content
Expand all 18 lectures 01:03:24
+ – Getting Started
7 lectures 14:17

Welcome to How to Visualize Data with JavaScript. In this project, join Elisabeth Robson to learn how to incorporate data visualization into your web skills using simple JavaScript along with HTML and CSS. Elisabeth will take you through building an interactive visualization using data downloaded from NOAA, reading data into a web page, adding the data to an HTML table with JavaScript code, adding color to the visualization with JavaScript and CSS, and using a little jQuery to help make selecting and updating elements in the page easy.

We've created a workbook to accompany this course, which you'll find below. Please download and look through it before you begin; we'll be returning to individual sections throughout the course for more information and exercises.

Pre-requisites

To successfully complete this project, we recommend that you have some background in HTML, CSS, and JavaScript. You don't need to be an expert by any means, but you should have experience building web pages with HTML and CSS, and you should have basic programming skills with JavaScript.

Learning Path

  • Head First HTML and CSS

  • Head First JavaScript Programming (Chapters 1-6)

  • How jQuery Works: The Basics (https://learn.jquery.com/about-jquery/how-jquery-works/)

  • This course: How to Visualize Data with JavaScript

Introduction
Preview 01:11

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

What is a Visualization?
Preview 03:03
Do the Work: Explore Visualizations of Climate Change Data
00:12

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.

Inspect the Data
Preview 05:57
Do the Work: Explore the Data
00:12

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

Get Set Up
03:16
Do the Work: Create the visualization by hand
00:25
+ – Write the Code
10 lectures 45:52

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

Build the HTML
03:16

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.

Understand the Data
05:14

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.

JavaScript to Load the Data
04:41

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.

Understand the Algorithm
03:11
Do the Work: Try Writing some Code
00:30

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.

Build the Data Table with JavaScript
06:52

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.

Add the Data to the Table with JavaScript
10:55
Do the Work: Experiment with Color Tools
00:06

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.

Add the Color Legend
02:13

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.

Style the Visualization with CSS
08:54
+ – Wrap up
1 lecture 03:14

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

Gain some Insight
03:14