Integrating d3.js with React

Integrating d3.js with React, available at $199.99, has an average rating of 4.71, with 64 lectures, based on 7 reviews, and has 28 subscribers.

You will learn about Bring Data Visualization to Life Set up your project with React, TypeScript and d3 Create simple and advanced d3 charts Work with complex charts such as world and force charts Integrate d3 data with React state management Improve the performance of your d3 components Deploy as a serverless app and debug test Learn to integrate third-party charting libraries including Visx, Nivo, React-vi, and Victory This course is ideal for individuals who are React developers or d3 developers It is particularly useful for React developers or d3 developers.

Enroll now: Integrating d3.js with React

Summary

Title: Integrating d3.js with React

Price: $199.99

Average Rating: 4.71

Number of Lectures: 64

Number of Published Lectures: 64

Number of Curriculum Items: 64

Number of Published Curriculum Objects: 64

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Bring Data Visualization to Life

Set up your project with React, TypeScript and d3

Create simple and advanced d3 charts

Work with complex charts such as world and force charts

Integrate d3 data with React state management

Improve the performance of your d3 components

Deploy as a serverless app and debug test

Learn to integrate third-party charting libraries including Visx, Nivo, React-vi, and Victory

Who Should Attend

React developers

d3 developers

Target Audiences

React developers

d3 developers

Learn to integrate D3.js into a React TypeScript project and create a charts component working in harmony with React. Understand how you can utilize D3 with React to bring life to your charts.

Using this course, you will create simple charts such as line, bar, donut, scatter, histogram, and others, and advanced charts such as a world map and force charts. You will learn to share the data across your components and charts using React Recoil state management, and understand how to integrate third-party chart libraries that are built on D3 such as Visx, Nivo, React-vi, and Victory. Lastly, you will learn how to deploy your chart as a serverless app on popular platforms.

React and D3 are two of the most popular frameworks in their respective areas – learn to bring them together and take your storytelling to the next level.

YOU WILL:

· Learn to set up your project with React, TypeScript, and D3.js

· Learn how to create simple and advanced D3.js charts

· Learn to work with complex charts such as world and force charts

· Integrate D3 data with React state management

· Learn to improve the performance of your D3 components

· Learn how to integrate popular React charts built on D3

· Learn how to deploy as a serverless app and debug test

This course is intended for readers that already have basic knowledge of React, HTML, CSS, and JavaScript.

Course Curriculum

Chapter 1: React + D3 Hello World

Lecture 1: Setting up the environment

Lecture 2: Hello D3 Function Component

Lecture 3: Hello D3 Class Component

Chapter 2: Graphics and Interactions

Lecture 1: Introduction

Lecture 2: Graphics – JSX Canvas

Lecture 3: Graphics – SVG advanced

Lecture 4: Map data in React using JSX

Lecture 5: Map data in React using d3

Lecture 6: Your first chart – Simple bar chart

Lecture 7: User Gestures – React & d3 Mouse Events

Lecture 8: Animating Graphics with React

Lecture 9: Animating Graphics with d3

Lecture 10: Animate SVG with CSS Transitions

Chapter 3: React + d3 – Simple Charts Part 1

Lecture 1: Line Chart

Lecture 2: Resizable Line Chart Widget

Lecture 3: Line Chart Widget with Animation

Lecture 4: Area Chart

Lecture 5: Area Chart with Gradient

Lecture 6: Area Chart with Custom Space Colors

Lecture 7: Bar Chart

Lecture 8: Bar Chart tooltip interaction

Chapter 4: React + d3 – Simple Charts Part 2

Lecture 1: Pie Chart

Lecture 2: Donut Chart

Lecture 3: Scatter Plot

Lecture 4: Scatter Plot Interactivity

Chapter 5: Integrating with Recoil State Management

Lecture 1: Histogram chart with Recoil

Lecture 2: Integrating Histogram Chart With Material-UI Components

Lecture 3: Summary

Chapter 6: Advanced charts – World Chart

Lecture 1: Introduction

Lecture 2: WorldMap d3 & React – Hello World Map Atlas

Lecture 3: Round World Map projection

Lecture 4: Rotating round world map chart

Lecture 5: Rotating round world map chart with coordinates

Lecture 6: Refactoring World Map

Chapter 7: World Map Widget

Lecture 1: Setting up our data and state management

Lecture 2: World Map Widget Component

Lecture 3: ClientList Material-UI Component

Lecture 4: ClientListDetail Material-UI Component

Chapter 8: Force Chart Part I – Bubble Chart

Lecture 1: Bubble chart

Lecture 2: Bubble Chart User Interaction

Chapter 9: Force Chart Part II – Force network graph

Lecture 1: Intro and setting up with data management

Lecture 2: Network graph graphics

Lecture 3: Network graph interactivity

Chapter 10: Integrating Popular Chart Libraries Built on D3

Lecture 1: Introduction

Lecture 2: Recharts

Lecture 3: Visx

Lecture 4: Victory

Lecture 5: Nivo

Lecture 6: React-vi

Chapter 11: Performance Knick-Knacks

Lecture 1: Intro

Lecture 2: Data loading & JSON vs CSV

Lecture 3: Install modules instead of global imports

Lecture 4: Tree shaking

Lecture 5: Update DOM only when needed

Lecture 6: SSR & Optimize CRA with Prerender

Lecture 7: Optimize CRA with Prefetching

Lecture 8: Optimize CRA with Precache

Lecture 9: Memorize function with useCallback

Chapter 12: Publish Your App

Lecture 1: Intro

Lecture 2: Create React + d3 on SSR with Next.js

Lecture 3: Publish Next.js with Express

Lecture 4: Create and publish CRA SPA

Lecture 5: Publish Serverless with Heroku

Chapter 13: Bonus Material

Lecture 1: Donut Pie Chart with Polylines and Labels

Instructors

Eli Elad Elrom
REACT FULL STACK DATA VISUALIZATION EXPERT

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 1 votes

4 stars: 0 votes

5 stars: 6 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!