Skip to content
O'Reilly home
Career Development

Data Visualization in JavaScript and React

Published by Pearson

How to Make Complex Data User-Friendly

Feb. 1, 2022

6 - 10 p.m. Coordinated Universal Time

140 Spots Remaining

Sign up for a free trial!

or sign in.

Registration closes Jan. 31, 2022 11 p.m. Coordinated Universal Time

What you’ll learn and how you can apply it

  • How to make custom visualizations for your data
  • How to handle data efficiently on the front-end with JavaScript
  • How to work with different data sources in JavaScript
  • How to add visualizations to a React app

This live event is for you because…

  • You're already a web developer working with JavaScript
  • You have familiarity with React and want to make a better user experience
  • You have worked with complex data on the front-end


  • Familiarity with JavaScript principles like data handling, calling APIs, and working with user queries
  • An understanding of how databases work at a high-level and how the back-end serves data to the front-end via APIs
  • Some knowledge of front-end development principles like web performance and user experience

Course Set-up

Recommended Preparation

Recommended Follow-up


The timeframes are only estimates and may vary according to how the class is progressing.

Getting Started with Data Visualization (15 min)

  • Why data visualization is important in communication
  • Approaching data visualization with CSS
  • Why this breaks down with complex data

Q&A (5 min)

Break (5 min)

Working with Visualizations and JavaScript (40 min)

  • Difference data sources for a front-end app
  • Setting up the vanilla JavaScript demo app
  • How to process the data in an efficient
  • Quick visualizations with CSS
  • Adding the D3 package
  • Handling data in D3

Q&A (10 min)

Break (10 min)

Working with Different Data Sources (40 min)

  • Handling API responses
  • Fetching directly from the database in the client
  • Using other services to retrieve data

Q&A (10 min)

Break (10 min)

Setting Up Data Visualizations in React (40 min)

  • Setting up the project
  • Handling initial loads and updates
  • Using multiple data sources
  • Creating different data components

Q&A (10 min)

Break (10 min)

Checking For Accuracy (20 min)

  • Adding tests to React
  • Performing quality assurance for sensitive data
  • Data ethics

Q&A (5 min)

Course wrap-up and next steps (5 min)

  • More resources
  • Next classes

Your Instructor

  • Milecia McGregor

    Milecia is a senior software engineer with a master’s in mechanical and aerospace engineering. She has worked in robotics, front-end development, back-end development, DevOps, IoT, machine learning, data science, cybersecurity, and almost every other part of tech. She’s also helped manage teams of developers and has done work as a developer advocate for a number of startups. In her free time, she likes to play with her dog and learn random skills like unicycle riding.

Start your free 10-day trial

Get started

Want to learn more at events like these?

Get full access to O'Reilly online learning for 10 days—free.

  • checkmark50k+ videos, live online training, learning paths, books, and more.
  • checkmarkBuild playlists of content to share with friends and colleagues.
  • checkmarkLearn anywhere with our iOS and Android apps.
Start Free TrialNo credit card required.