From the course: D3.js Essential Training

Introducing SVG - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Introducing SVG

“

- [Instructor] In the last video, we said HTML is like the base plate in a Lego set, the foundation everything else snaps onto. Well, if HTML is the base plate. SVG is the smooth building mat where we lay out the design. It's the canvas where D3 can place shapes such as rectangles, lines, and circles based on your data. A D3 visual is actually a nest of elements, such as bars and circles, all sitting inside an SVG element, which itself sits inside your HTML page. Now, we're going to look closely at these scalable vector graphics, or SVGs. We'll explore what one is and the role it plays as the canvas for D3's data-driven visuals. On the left of the image, in the text editor, we see SVG tags. On the right, you can see the browser's interpretation of this, which at the moment is a bit underwhelming because by default, SVG elements are given a fill of white and zero border, so you can't see it. They're also given different widths and heights depending on which type of browser you're using. So now, I'm applying a border around the SVG element, and you can see there the default size that it's been given and the default position. By default, the SVG shows as a block element, rectangular. Think of it as a canvas for us to draw on. The SVG can sit directly within the body tags as it's doing here, or it can sit within another element such as a div. So we could put div there. And that would all work fine. So it's quite unfussy about where it sits, but it is very fussy about what goes inside it. You can't put a div or a table inside an SVG. It will only accept graphical items like rectangles, lines, and circles. Here's an official list of all of the element types that can sit within an SVG. And one thing I should make clear here, or perhaps is clear from this list, SVG is not an invention of D3. It's the other way round. D3 just automates the addition of SVG elements to the HTML and binds those elements to the data. That's its entire job. So we don't use D3 to add divs or tables to our HTML. We use it to add shapes and lines to our SVG. Now, let's spend a bit of time to understand what scalable vector graphic really means, because the vector part is key. There are two kinds of digital graphic, vector and raster. Raster's also called bitmap. It's often impossible to tell one from another just by looking at the image, but the difference is very important for our purposes. Raster graphics, such as photographs, reduce to tiny little blocks of color called pixels. A raster graphic that's 200 pixels wide by 100 high can't be made to 400 by 200 without losing definition. A vector graphic, by contrast, never loses definition. A vector graphic appears to you and me to be a shape, but behind the scene, it is maths. For a hexagon, for example, a vector graphic contains information that says, pen down, draw six consecutive lines at the following angle, pen up. Now, you can make that instruction 10 pixels or 10,000 pixels wide, and the quality will be the same. Vector graphics are perfect then for visualizing data because we're always dealing in shapes, lines, and fills. So now you see that SVG gives D3 a space to work, a graphic-friendly canvas where your data becomes shapes, lines, and text that never lose quality, no matter the size.

Contents