Book Image

How to Visualize Data with JavaScript [Video]

By : Elisabeth Robson
Book Image

How to Visualize Data with JavaScript [Video]

By: Elisabeth Robson

Overview of this book

Data visualizations are representations of data in pictorial or graphical format. Sometimes we draw a simple line graph, like the graph of global surface temperature; sometimes, we use maps, like the high-temperature map for the United States for June 15, 2018. Other types of visualization include bar graphs, scatter plots, pie charts, bubble charts, heatmaps, treemaps, cloropleth maps, sankey diagrams, and more. Even art can visualize data. In this course, we’ll learn how to incorporate data visualization into your web skills using simple JavaScript along with HTML and CSS. We will take you through building an interactive visualization using data downloaded from NOAA, reading data into a webpage, 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 make selecting and updating elements in the page easy. 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 in JavaScript. By the end of this course, you will be able to visualize your data with JavaScript. All the resources and supportive files for this course are available at
Table of Contents (3 chapters)
Chapter 2
Write the Code
Content Locked
Section 3
JavaScript to Load 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.