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

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