From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Making your graphic responsive

Making your graphic responsive - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Making your graphic responsive

“

- [Narrator] A web page that's responsive changes its size or layout depending on the size of the user's browser. You've probably visited a web page before on a computer, only to notice later that the layout is completely different when you visit the same web page on your phone. The content is often identical. The actual HTML that's written doesn't need to change. What changes is the styling. So typically, making a web page responsive is the remit of CSS, and CSS3 in particular. But since this is a course on D3, I'm going to show you the JavaScript method. We're looking at out Voronoi diagram, and if we look at the code, we can see we've got a width there of 960. And if we look at the graphic, you can see that 960 is significantly less wide than my screen. To make this graphic responsive, we can use JavaScript to find the height and width the window, and use that to set the width and the height. So we're going to start off by just logging to the console. window.innerWidth And there…

Contents