D3 = math, React = rendering
The previous lesson explained what D3.js is: a collection of small utility functions organized into modules.
These modules can actually be split into two types: the "mathematical" modules and the "rendering" modules. This has a massive impact on how we use D3.js with React. Let's see how it simplifies our lives!
⚡️ Math vs Rendering
Do you know what a treemap is?
It is this kind of graph, where rectangles are used to represent hierarchical data, with size proportional to a value.
Let's say you have a company organized in 3 teams (yellow, green, blue), and a few employees in each team, with each employee that has a value. It gives the following result:
A basic treemap made with React and D3.js
Now, try to pause for a bit and think hard. If you had a pen and a paper, and would have to represent the dataset using a treemap, how would you proceed?
Whether you realize it or not, 2 steps are involved:
Compute the sum for each team. Then calculate the coordinates for 3 rectangles that will have their area proportional to the value. Inside each rectangle, do the same math for each individual.
Now you can take your pen and actually draw the shapes on your piece of paper, respecting your coordinates.
Building a graph with code follows the same process.
And it's important to understand the boundaries because we'll use D3.js for the Math part, and React for the rendering.
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login