8 Integrating D3 in a frontend framework

 

This chapter covers

  • Loading the D3 library in frontend frameworks
  • 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’ve been creating projects in a simple but old-fashioned way by using only HTML, CSS, and JavaScript files. But today’s frontend 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 such as React, Angular, Svelte, and Vue.js, 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 multipage websites.

8.1 Approaches to using D3 in a frontend 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

Summary