8 Integrating D3 in a front-end framework

 

This chapter covers

  • Loading the D3 library in a front-end framework
  • Creating a dashboard with D3 and React
  • Allowing D3 to manipulate the DOM with React hooks
  • Using D3 as a utility library and letting React render and update the DOM
  • Applying the same strategies in Angular and Svelte

So far in this book, we have been creating projects in a simple but old-fashioned way, using only HTML, CSS, and JavaScript files. But today’s front-end projects are generally built with JavaScript frameworks. These tools facilitate the development of larger projects and optimize their performance.

With the help of JavaScript frameworks like React, Angular, and Svelte, we can create projects where everything happens instantly and provide the feeling of a mobile application. We call such projects Single Page Applications (SPAs) because only one HTML file is loaded from the server and then updated dynamically, even for multi-page projects.

8.1 Approaches to using D3 in a front-end framework

8.2 Installing the D3 library in a React project

8.3 Loading data into a React project

8.4 A reusable approach to SVG containers

8.5 Allowing D3 to control a portion of the DOM

8.5.1 React

8.5.2 Angular

8.5.3 Svelte

8.6 Using D3 as a utility library

8.6.1 React

8.6.2 Angular and Svelte

8.6.3 Generating curves

8.7 Hybrid approach

8.8 Summary