Create a Treemap Using d3 and React With Wrapping SVG Text

Treemaps are a great way to view hierarchical data sets using nested rectangles. In this article we’re going to create a Treemap utilizing the d3 JavaScript library in React to visualize a set of static data.

Setting up our environment

First we’ll need to create a React template which we’ll do using the create-react-app npx command found below. This will set up a React template for us and help us hit the ground running.

npx create-react-app treemap

If you are unfamiliar with npx or npm please head over to nodejs.dev to catch up and learn more. Additionally the official React website is a great…