Integrating D3.js with React: Learn to Bring Data Visualization to Life

✍ Scribed by Elad Elrom

• Publisher: Apress
• Year: 2021
• Tongue: English
• Leaves: 373
• Edition: 1
• Category: Library

✦ Synopsis

Integrate D3.js into a React TypeScript project and create a chart component working in harmony with React.  This book will show you how utilize D3 with React to bring life to your charts.

Seasoned author Elad Elrom will show you how to create simple charts such as line, bar, donut, scatter, histogram and others, and advanced charts such as a world map and force charts.  You'll also learn to share the data across your components and charts using React Recoil state management. Then integrate third-party chart libraries that are built on D3 such as Rechart, Visx, Nivo, React-vi, and Victory and in the end deploy your chart as a server or 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.

What You'll Learn

• Set up your project with React, TypeScript and D3.js
• Create simple and advanced D3.js 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 server or serverless app and debug test
  

Who This Book Is For

Readers that already have basic knowledge of React, HTML, CSS and JavaScript.

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewer
Introduction
Chapter 1: Setting Up Our Technology Stack
React
Why React?
React Advantages and Limitations
React Template Starter Project
Prerequisites
Installing Node and NPM on a Mac/PC
Download Libraries: Yarn or NPM
Install Yarn on a Mac/PC
Create-React-App MHL Template Project
Type Checker: TypeScript
Why Should You Integrate TypeScript into Your React Project?
TS vs. JS, What’s the Big Deal?
D3
D3 Version >4
Other Data Viz Libraries
ReactTransitionGroup Adds-Ons
React v17 + D3 + TypeScript
React Function Component with D3
App.tsx
HelloD3.tsx
CSS Preprocessors: Sass/SCSS
HelloD3.test.tsx
Jest and Enzyme + Sinon
Sinon
React Class Component with D3
HelloD3Class.tsx
Lint ESLint and Prettier
Summary
Chapter 2: Graphics and Interactions
Overview of Creating Charts
Drawing Graphics
SVG vs. HTML
JSX Canvas
JSXCanvas.tsx
App.tsx
React SVG
Map Data in React Using JSX
HelloJSXData.tsx
Map Data in React Using D3
HelloD3Data.tsx
Simple Bar Chart with D3
React Component Lifecycle Hooks
User Gestures
React Mouse Events
D3 Mouse Events
Animating Graphics
Animating with React
PulsatingCircle.tsx
Animating with D3
PulsatingCircleD3.tsx
Summary
Chapter 3: Basic Charts: Part 1
Setup
Line Chart
line.csv
types.ts
BasicLineChart.tsx
BasicLineChart.scss
BasicLineChart.test.tsx
App.tsx
Area Chart
area.csv
BasicAreaChart.tsx
App.tsx
Bar Chart
bar.csv
BasicBarChart.tsx
types.ts
BasicBarChart.scss
App.tsx
Summary
Chapter 4: Basic Charts: Part 2
Pie Chart
pie.csv
types.ts
BasicPieChart.tsx
BasicPieChart.test.tsx
App.tsx
BasicPieChart.scss
BasicDonutChart.tsx
App.tsx
Scatter Chart
scatter.csv
types.ts
BasicScatterChart.tsx
App.tsx
Histogram Chart
types.ts
Histogram.tsx
Histogram.scss
App.tsx
Summary
Chapter 5: Integrating State Management
State Management
Flux
What Does MVC Solve?
Recoil
Historical Price State
historicalPriceObject.ts: Set Up Our Data Type
index.ts: Easy Access
historicalPriceAtoms.ts: Shared State
historicalPriceSelectors.ts: Transforming Our async State
HistogramWidget: Custom Component
Histogram Chart with Recoil
HistogramWidget.tsx: Custom Component
HistogramWidget.scss
Graph.test.tsx
App.tsx
Price Table List Component
types.ts
PriceTableList.tsx
PriceTableList.scss
HistogramWidget.tsx
HistogramWidget.scss
Summary
Chapter 6: World Chart: Part 1
Setup
Install Additional Needed Libraries and Types
World Map Atlas
WorldMapAtlas.tsx
App.tsx
App.scss
Round World Map
RoundWorldMap.tsx
Rotating Round World Map Chart
AnimationFrame.tsx
RotatingRoundWorldMap.tsx
Rotating Round World Map Chart with Coordinates
RotatingRoundWorldMapWithCoordinates.tsx
Refactoring
coordinates.csv
types.tsx
WorldMap.tsx
App.tsx
Summary
Chapter 7: World Chart: Part 2
Setup
Shared State Management
Model Files
Atoms
Selectors
Widget
WorldMap.tsx
PulsatingCircle.tsx
ClientList.tsx Subcomponent
ClientListDetail.tsx Subcomponent
ClientsWidget Component
App.tsx
Quality Check
WorldMap.test.tsx
Summary
Chapter 8: Force Charts: Part 1
Bubble Chart
What We Will Be Building?
Housekeeping
Setup
Bubble Chart Components
types.ts
BubbleChart.scss
App.tsx
App.scss
Quality Check
Redraw and Animate
BubbleChartWithAnimation.tsx
App.tsx Update
App.scss Update
Summary
Chapter 9: Force Charts: Part 2
Force Directed Graph
What We Will Be Building?
Housekeeping
Setup
Force Chart Component
types.ts
Graph Subcomponents
Circles.tsx and Circle.tsx
Circles.tsx
Circle.tsx
Links.tsx and Link.tsx
Links.tsx
Link.tsx
Labels.tsx and Label.tsx
Labels.tsx
Label.tsx
SimpleForceGraph.tsx
Recoil Widget
powerChartSelectors.ts
NetworksWidget.tsx
NetworksWidget.scss
Parent Component App
App.tsx
App.scss
Summary
Chapter 10: Integrating Popular Chart Libraries Built on D3
Why Use Ready-Made Components?
Popular React Charts Built on Top of D3
Comparison of Popular React Charts Built on Top of D3
Support TS
Modules
Mock Data
Simplicity
Styled Already
Documents and Examples
Contributors, Popularity, and Open Issues
Implementing Libraries
Starter Project
Rechart
Setup
Implement Rechart
types.ts
SimpleLineChart Component
lineDataSelectors.ts
App.tsx
Cost
Pros
Cons
Visx
Setup
Implementing Visx
Cost
Pros
Cons
Victory
Setup
Implementing Victory
Cost
Pros
Cons
Nivo
Setup
Implement Nivo
calendar.json
calendarDataSelectors
SimpleCalendarChart
App.tsx
Cost
Pros
Cons
React-vis
Setup
Implementing React-vis
Cost
Pros
Cons
Summary
Chapter 11: Performance Tips
Setup
Data Loading
Install Modules Instead of Global Imports
Server-Side Rendering
Tree Shaking
Update the DOM Only When Needed
Check the D3 Data
Clone the Data
React Class Component
Use CSV Over JSON
Optimize CRA with Prerendering, Prefetching, and Precaching
Add the Rectangle as a Page
Prefetching
Precache: Work Offline
What Does It Mean?
How Is Your App Working Offline?
Memorize Function with useCallback
Summary
Chapter 12: Publishing Your React D3 App
Selecting Your Startup Project
Why Publish a Build During the Development Phase?
What Tool Should You Pick?
SPA vs. SSR
SPA and SSR Startup Projects
Publish Your React Code
Create and Publish SSR with Next.js
Set Up a Next.js Starter Project
Install TypeScript
Install D3
Rectangle.tsx
Update index.ts
Publish Next.js with Express
server.js
Publish Next.js Serverless with Heroku
Common Helpful Commands for Working with Heroku
Create and Publish an SPA with CRA
Rectangle.tsx
App.tsx
Publish CRA with serve
Publish CRA with Express
Server.js
Publish CRA Serverless with Heroku
Helpful Debug Profile Tools
Debug and Profile with Chrome DevTools
What Is the Chrome DevTools Extension?
React Developer Tools Chrome DevTools Extension
Profiler in React Developer Tools Chrome DevTools Extension
Realize for React Chrome DevTools Extension
Recoil Chrome DevTools Extension
React Profiler API
Summary
Index