From the course: D3.js Essential Training

Responsive design - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Responsive design

“

- [Instructor] What does responsive actually mean? A responsive webpage automatically adjusts or responds to changes in screen size, resolution, or device. Look at these devices. They are showing the same website in different ways. The tablet and phone are showing the same content scaled, but the desktop is showing the text in a different location if you look. It's the same site and the same content, but repositioned. This is responsive. The idea is always to make the experience good for users regardless of their screen size. D3 graphics are not responsive by default. D3 does not resize your graphical elements when the screen changes size. When we add graphical elements to the SVG, we typically supply fixed pixel sizes. For example, a circle with a radius of 50 pixels. This is not responsive. Now, there's two types of viewport I want to discuss with you. One is a webpage viewport and the other is an SVG viewport. The webpage viewport controls how the entire page scales across devices while maintaining aspect ratio. And we're going to add that in as a meta tag into our head. Now to begin with, this will do nothing at all for us. If I just refresh this page, we can see no difference at all. But this is very good to have in your back pocket. The problem is that mobile devices often show SVG elements in a really strange way. It's like they're massively zoomed out, and the SVG appears to be too skinny. And what's worse is if you use, as I do, device emulation in your browser to test what things would look like, you can't reproduce the problem in this toggle because the browser is basically too clever and it's doing things properly, it's redrawing the page correctly. Whereas an actual mobile uses a sort of preset zoom that doesn't interact very well with SVG elements. So short of videoing an actual mobile, it's difficult to demonstrate. But trust me when I say that this meta key tag is good just to have in a template that you always make sure you use. And this initial scale means a zoom of a hundred percent by the way, so you can change that, doesn't have to start at a hundred. So I said there were two viewports to discuss. The other one is the SVG viewport. So what we're going to do is make the SVG full screen size. So let's close that for a second. And that's made it full screen width but not the height. Let's just lose these div tags for a second. 'Cause at the moment, our SVG is within a div. And refresh that. And there's something I normally add into my template files, which just sort of resets everything. Height is a hundred percent, margin is naught. And there we go. Okay, we've made it full size of our screen. But this is not yet the same as scaling the SVG elements to be bigger or smaller depending on the size of the screen. So it's made the SVG the pink bit has become full width and full height, but the circle hasn't changed size yet. And to do that, we use something called viewBox. And I will explain these numbers in a second. I want to show you what it does first. So 0 0 and I'm going to use 200 100 preserveAspectRatio, and then I'm basically saying in the middle, centralize everything. And that's what that bit means. Okay, so we've got this viewBox thing, and then when I refresh the browser, you can see it scaled not just the SVG but the contents of the SVG. And what it's doing, you're telling it to take a section of the page basically and zoom that up. And the way to read this is to say the section of the page is from coordinates 0 0 to coordinates 200 100. So that's XY and then end X end Y. That's how you read those viewBox characteristics. Now, you may already be familiar with lots of different ways of making a webpage responsive. You can use Flexbox CSS meta tags, and there are also other tools in your D3 arsenal which we haven't come across yet for handling resizes. You can simply set dimensions to be percentages instead of pixels, but then of course, you've got to do that for all of your elements, not just your SVG. Another option, which I tend to use actually is to use D3 scaling functions, which can be used to position and size elements based on the available space. And although it's tempting to stick with what's familiar, it really can be worth time to get to know viewBox as we'll see later. I hope you'll join me in using this method throughout the course to produce responsive and super-usable visualizations from the very start. Now let's move on to pulling the D3 library into our HTML using JavaScript.

Contents