Tutorialspoint

How to Visualize Data with JavaScript

person icon Packt Publishing

How to Visualize Data with JavaScript

Learn how to visualize trends in temperature data with HTML, CSS, JavaScript, and jQuery

updated on icon Updated on Oct, 2023

language icon Language - English

person icon Packt Publishing

architecture icon IT & Software,Other IT & Software,Javascript

Lectures -13

Duration -1 hours

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 19,000+ top Tutorialspoint courses anytime, anywhere.

Course Description

This course is for developers who want to practice their JavaScript skills and use JavaScript to create visualizations. Also, developers who are interested in climate change and visualizing climate data can benefit from the course.

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.

Goals

What will you learn in this course:

  • 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
How to Visualize Data with JavaScript

Curriculum

Check out the detailed breakdown of what’s inside the course

Getting Started
4 Lectures
  • play icon Introduction 01:07 01:07
  • play icon What is a Visualization? 03:03 03:03
  • play icon Inspect the Data 05:57 05:57
  • play icon Get Set Up 03:16 03:16
Write the Code
8 Lectures
Tutorialspoint
Wrap up
1 Lectures
Tutorialspoint

Instructor Details

Packt Publishing

Packt Publishing

Founded in 2004 in Birmingham, UK, Packt's mission is to help the world put software to work in new ways, through the delivery of effective learning and information services to IT professionals.

Working towards that vision, we have published over 6,500 books and videos so far, providing IT professionals with the actionable knowledge they need to get the job done - whether that's specific learning on an emerging technology or optimizing key skills in more established tools.

As part of our mission, we have also awarded over $1,000,000 through our Open Source Project Royalty scheme, helping numerous projects become household names along the way.

Course Certificate

User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
People having fun around a laptop

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
People having fun around a laptop

Talk to us

1800-202-0515