How to make your D3.js projects responsive

Anne-Marie Dufour — Fri, 22 Apr 2022 06:52:00 +0000

A quick tip to make your D3.js projects responsive.

1- Set the viewBox attribute of the SVG parent: the first two values to zero, the last two to the width and height of your project, in pixels. It will ensure that the width/height ratio is maintained on all screen sizes.
Omit the width and height attributes since they will give fixed width and height to your project.

<svg viewBox="0 0 700 500">
  // Your viz goes here
</svg>

2- Wrap the SVG parent in a responsive container.
There are many ways to go about it. For simplicity, I used a div element with 100% width and a max-width of 700px that corresponds to the max-width of the page content. Any grid system will also work.

<div style="width:100%; max-width:700px;">
  <svg viewBox="0 0 700 500"></svg>
</div>

Hope that helps!

Introducing the third edition of D3.js in Action

Anne-Marie Dufour — Tue, 19 Apr 2022 13:44:40 +0000

I’m proud to announce that one of my most important projects so far has reached a huge milestone. As a co-author with Elijah Meeks, I have the honor to be working on the third edition of D3.js in Action, which is now available in Manning’s early access program (MEAP)! 🎉

Learning D3 for data visualization development can be scary, but once you understand a few key concepts, it actually gets intuitive and fun! Plus, mastering this library is a solid investment because the philosophy behind D3 opens the door to pretty much any web-based visualization you can dream of. If you don’t like to bump your head against the limitations of charting libraries, you’ll love D3.

In this new edition of D3.js in Action, you’ll learn the fundamental principles of D3 along with hands-on exercises where you’ll build portfolio-ready projects. You’ll also learn how to include D3 in React and Svelte projects, how to make your visualizations interactive, responsive, and much more.

With Manning’s early access program, you get the first chapters immediately and access to a forum where we’ll answer your questions directly! The later chapters will be progressively released, accompanying your learning pace.

Oh, and use the code mldufour2 to get 50% off. Only valid until April 28th!

DEV Community: Anne-Marie Dufour

How to make your D3.js projects responsive

Introducing the third edition of D3.js in Action