English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 01m | 875 MB
Learn how to visualize trends in temperature data with HTML, CSS, JavaScript, and jQuery
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.
What You Will Learn
- How to read JSON data into your JavaScript application
- How to create HTML elements to put your data into a webpage
- How to style the table data and color legend with CSS
- How to use JavaScript and jQuery to create elements
- Add the Color Legend
- Style the visualization with CSS
Table of Contents
Getting Started
1 Introduction
2 What is a Visualization
3 Inspect the Data
4 Get Set Up
Write the Code
5 Build the HTML
6 Understand the Data
7 JavaScript to Load the Data
8 Understand the Algorithm
9 Build the Data Table with JavaScript
10 Add the Data to the Table with JavaScript
11 Add the Color Legend
12 Style the Visualization with CSS
Wrap up
13 Gain Some Insight
Resolve the captcha to access the links!