From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 24,900 courses taught by industry experts.

Making your graphic responsive

Making your graphic responsive - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Making your graphic responsive

“

- [Instructor] Can you see how this website redraws as I change the size of the screen, including changing the layout entirely? So that's because it's responsive, and this is a general aim of web development, whether or not there's a D3 graphic on the page. We are now going to look at how to keep your visualization in step with your screen using View Box. And we're going to start off using our tree map code. Now, if you look, it's a fixed width at the moment. The SVG says 100%, but we'll look in the code in a second, and you can see what happens if I change the size of the screen, we just lose part of the graphic, and if I toggle device simulation on and off, we can see all of it, but there's a lot of white space at the bottom of the page, which is not ideal. So let's look at the code that is driving that. So in this tree map code, we have a fixed width and height. The SVG is set to 100% of the screen, and you have to have that in order for View Box to work. It doesn't have to be…

Contents