What is d3
D3.js is a powerful JavaScript library that offers a wide range of functions for creating dynamic graphs and visualizations.
Its popularity is immense; you'll find it hard to encounter a web-based graph that doesn't leverage D3 in some capacity. Let's explore why it's become such an essential tool.
Try to make a treemap
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:
A basic treemap made with React and D3.js
Drawing rectangles with React and some divs is simple. But how do you calculate the coordinates to ensure each rectangle's area matches its corresponding value?
That's exactly what the treemap() function in d3.js does for you.
And that's why we need d3!
Note: the React Graph Gallery has a whole section on treemaps! But do not try to understand the code for now!
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏