Data Visualization in JavaScript with React and D3.js

Data Visualization in JavaScript with React and D3.js, available at $69.99, has an average rating of 4.45, with 29 lectures, based on 42 reviews, and has 228 subscribers.

You will learn about Gain proficiency with two of the premier javascript libraries for data visualization Understand the challenges of integrating React and D3 and how to overcome c Build a fully interactive data visualization in D3 and React Understand how to add fluid transitions and animations to charts This course is ideal for individuals who are Students learning software development who want to gain experience with data visualization or Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences or Journalists or others using data for storytelling and audience engagement It is particularly useful for Students learning software development who want to gain experience with data visualization or Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences or Journalists or others using data for storytelling and audience engagement.

Enroll now: Data Visualization in JavaScript with React and D3.js

Summary

Title: Data Visualization in JavaScript with React and D3.js

Price: $69.99

Average Rating: 4.45

Number of Lectures: 29

Number of Published Lectures: 29

Number of Curriculum Items: 29

Number of Published Curriculum Objects: 29

Original Price: $34.99

Quality Status: approved

Status: Live

What You Will Learn

Gain proficiency with two of the premier javascript libraries for data visualization

Understand the challenges of integrating React and D3 and how to overcome c

Build a fully interactive data visualization in D3 and React

Understand how to add fluid transitions and animations to charts

Who Should Attend

Students learning software development who want to gain experience with data visualization

Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences

Journalists or others using data for storytelling and audience engagement

Target Audiences

Students learning software development who want to gain experience with data visualization

Data analysts or data scientists looking for more engaging and intuitive ways to present their work to general audiences

Journalists or others using data for storytelling and audience engagement

Part science, part art, data visualization is one of the most -in-demand skills in the data science and software industries. Taught by a full-time data visualization developer, this dataviz course gets you up and running quickly with a flexible and highly customizable method for building interactive visualizations and storytelling with data.

After this tutorial, you’ll be able to produce beautiful data visualizations using your own graphic style that are performant and highly responsive to user input. The stack taught here includes the latest versions of React (v17) and D3.js (v7), two of the most popular modern JavaScript libraries mentioned in job postings. The course focuses on learning JavaScript through practical experience and examples, drawing on the author’s experience to show you the tradeoffs of various methods of combining these powerful tools.

If you’re looking to gain highly in-demand skills for business intelligence, building dashboards, or other visualization tools, this course will get you up and running quickly and give you a competitive edge in the job market.

Some prior knowledge of using React and D3 separately is recommended for this course. However, we will cover the necessary topics in brief review modules and provide plenty of data visualization examples, so a little independent study and a grasp of basic JavaScript should be enough to get you started.

Course Outline:

Introduction

Why learn React and D3

Part 1: D3 basics review

Binding data to the Document-Object Model (DOM) using D3

Adding data and styling it in D3

Part 2: A declarative approach to integrating React and D3

Translating D3 syntax into JSX

Pros and cons of this approach

Part 3: A hybrid approach to React and D3

Learn how to  balance D3’s built-in transition capabilities and DOM updates and React’s render cycle

Build a fully functioning scatterplot that updates with new data

Part 4: Practical project – Gapminder scatterplot

Build a fully interactive data visualization of the popular gapminder dataset

Add user-defined filters and other controls

Bring all your knowledge together to create a fully immersive chart similar to what you would create for a business use case or publication

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Why combine D3 and React?

Lecture 3: How the Course is Structured

Chapter 2: Review of basic D3 concepts

Lecture 1: Introduction to D3 and the Document Object Model (DOM)

Lecture 2: Data binding with D3

Lecture 3: Scaling and styling data in D3

Chapter 3: Integrating React and D3: A Declarative Approach

Lecture 1: Introduction: the quickest way to start integrating React and D3

Lecture 2: Setting up our React project environment

Lecture 3: Functional Components

Lecture 4: Loading data from static files

Lecture 5: Setting up scales using D3

Lecture 6: Mapping over data elements to create JSX

Lecture 7: Adding interactivity with useState

Lecture 8: Pros and Cons of the declarative approach

Chapter 4: Integrating React and D3: A hybrid approach

Lecture 1: Introduction: the best of both the React and D3 worlds

Lecture 2: Project setup and creating the general structure

Lecture 3: Adding a useEffect hook with styling

Lecture 4: Adding transitions and animation

Lecture 5: Pros and Cons of this approach

Chapter 5: Real-world Project: Building the Gapminder scatterplot

Lecture 1: Introduction to the Gapminder chart

Lecture 2: Loading data and creating the chart components

Lecture 3: Adding scales using D3 and the useEffect hook

Lecture 4: Styling the chart using D3

Lecture 5: Building the chart axes

Lecture 6: Adding a crosshair to display averages

Lecture 7: Adding interactivity: building the year slider

Lecture 8: Building the interactive Legend

Chapter 6: Course Wrap-up

Lecture 1: Publishing your work

Lecture 2: Final thoughts on React and D3 for data visualization

Instructors

Caleb Diehl
Data Visualization Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 5 votes

4 stars: 8 votes

5 stars: 29 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!