Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Integrating d3.js with React

Name: Integrating d3.js with React
Rating: 4.7 (7 reviews)

Bring Data Visualization to Life

Created byEli Elad Elrom

Last updated 6/2021

English

English [Auto],

What you'll 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

Course content

13 sections • 64 lectures • 17h 24m total length

Setting up the environment6:25
'Hello D3' Function Component15:52
Create a function component in React using useRef and useEffect to render a d3-driven svg with rectangles and hello world text, and compare function and class components in TypeScript.
'Hello D3' Class Component16:47

Introduction3:09
Graphics - JSX Canvas12:37
Graphics - SVG advanced7:15
Map data in React using JSX5:00
Map data in React using d35:24
Your first chart - Simple bar chart9:45
User Gestures - React & d3 Mouse Events17:31
Learn how to implement user gestures in React and D3 by comparing vanilla, React synthetic events vs DOM-handled events, with svg circles, mouseover and click interactions for charts.
Animating Graphics with React14:03
Learn to animate graphics in React and d3.js by building pulsating circles with css-in-js, exploring transitions, keyframes, and svg integration for interactive data visualizations.
Animating Graphics with d310:34
Animate SVG with CSS Transitions6:08

Introduction1:05
WorldMap d3 & React - Hello World Map Atlas27:17
Explore building a world map atlas in React using D3.js by combining libraries, loading world map data, and rendering countries with geographic projections in a world atlas.
Round World Map projection6:32
Rotating round world map chart9:25
Rotating round world map chart with coordinates13:55
Integrate D3.js with React to plot latitude and longitude coordinates on a rotating world map, render markers, validate coordinates with a projection, and handle marker clicks.
Refactoring World Map23:14
Refactor a world map component by introducing shared types for map objects and coordinates, extracting loading logic to the parent, and wiring data via props to make the component reusable.

Introduction2:42
Recharts28:47
Visx20:02
Visx is a modular React library built on top of D3 that supports TypeScript and lets you import only the modules you need to build a histogram with mock data.
Victory6:09
Explore the Victory library for React by building a simple, labeled pie chart, highlighting its lightweight footprint and TypeScript support, and weigh it against d3.js for customization trade-offs.
Nivo17:26
Explore Nivo calendar chart integration in a React app, fetching JSON data for 2019–2021, styling with color palettes, legends, and a responsive calendar.
React-vi7:39
Learn to integrate the react-vis chart library with React to build a simple line chart using XYPlot, line series, and axes, including setup, styling, and handling open issues.

Requirements

It is good to be comfortable with HTML, JavaScript, and CSS and some knowledge in React. It will make understanding of concepts easier.

Description

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.

Who this course is for:

React developers
d3 developers

Integrating d3.js with React

What you'll learn

Explore related topics

Course content

React + D3 Hello World3 lectures • 39min

Graphics and Interactions10 lectures • 1hr 31min

React + d3 - Simple Charts Part 18 lectures • 3hr 19min

React + d3 - Simple Charts Part 24 lectures • 1hr 12min

Integrating with Recoil State Management3 lectures • 1hr 28min

Advanced charts - World Chart6 lectures • 1hr 21min

World Map Widget4 lectures • 1hr 2min

Force Chart Part I - Bubble Chart2 lectures • 1hr 2min

Force Chart Part II - Force network graph3 lectures • 2hr 1min

Integrating Popular Chart Libraries Built on D36 lectures • 1hr 23min

Requirements

Description

Who this course is for: