Introduction
Responsiveness is a crucial concept to master when building charts with D3. Indeed, a large proportion of your users will view your work on their phone.
Let's start by understanding what responsiveness means, how to test it, and why it's even harder for dataviz than for general web development.
What is responsiveness?
Responsiveness is the ability of a UI element — including charts and dashboards — to adapt and display correctly across different devices and screen sizes.
This ensures that users have an optimal viewing experience whether they're on a desktop, tablet, or phone.
The chart below is responsive: it always takes the full window width. Try resizing your browser to see it in action!
This density chart is responsive! Resize your window to see how the graph fits its container.
How to test responsiveness
Resizing your browser window is a good first step to check how your application behaves on a smaller screen.
But you absolutely need to use the developer tools to truly see how the result will look on a phone. Here is a quick demo:
Responsiveness + Dataviz = 😱
Building responsive web applications is already difficult. Modern tools make the technical side easier, but the UI and UX challenges remain.
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