SVG vs HTML5 Canvas

[00:00:00]
>> So we have our first lesson, and the goal for this lesson is to draw a flower petal on the screen. So, in the browser, we have two main web technologies to draw shapes onto the screen and thus to be able to create our data visualizations. And the two are SVG and HTML5 Canvas.

[00:00:22]
Today, we're going to be using SVG. But I want to give kind of a really quick overview of these two technologies and why you might choose one over the other. And so with SVG or scalar vector graphics, it is an XML syntax. So it's kind of you work with it very similarly to how you might already be working in HTML.

[00:00:47]
So each shape, each rectangle, each circle, each path is a DOM element that you can kind of set attributes on style or interact with, very similarly to an HTML element. And there's really sound differences in syntax. And sometimes, it's the subtle differences always gets me, so then I get tiny bugs when I go from SVG to HTML, cuz the attribute is called the same thing but then the syntax is slightly different.

[00:01:22]
So just watch out for those and pay attention to the SVG docs. I always use MDN, Mozilla Developer Network, and just pay attention to those syntax. But the reason why we're using SVG today is because it's so similar to HTML. So I think it's going to be hopefully natural flow from what you might be already doing in the web to using SVG with D3.

[00:01:53]
And so, the Pro 2 SVG, like I mentioned, is that it's easier to get started and interact with because each shape is a element. You can bind event listeners onto them. The con is that it's not very performant at large scale. So from my personal experience with SVG, I've had issues.

[00:02:17]
I guess this was a few years ago though, so I'm sure laptops or computers have gotten slightly a bit better. But I think it's still good rule of thumb, which is that with SVG, I've had trouble rendering maybe two or 3000 SVG elements in the browser. So anything above that, I wouldn't use SVG for.

[00:02:42]
And any time I'm trying to animate more than 1,000 elements, I definitely would not be using SVG. And those seem really big numbers for the DOM, but when you have datasets with thousands of rows or tens of thousands of rows, or millions of rows, that's actually not that big of a number, right, for data visualization.

[00:03:06]
So that's one thing to look out for. And the reason why it's not performant of those large scales is because, as you can probably imagine, if the DOM has to keep track of thousands of these elements and be updating, be able to update them at the individual level.

[00:03:25]
And potentially have to animate them by updating the attributes or styles on them really quickly. You can probably imagine how computationally intensive it would get. So on the other side is HTML5 Canvas. It is instead of being kind of like a DOM XML syntax, or a DOM element, it's instead one Canvas element in the DOM, and we draw shapes with a JavaScript API.

[00:03:59]
So we'll have kind of these lines that will say, a Canvas, draw rectangle, or Canvas arc or something like that. And what that does is it will draw to let's say a rectangle to the Canvas. And underneath the hood, it's storing that as kind of rows of pixel information.

[00:04:26]
So once you've drawn it, these shapes are inaccessible because it's just kind of arrays of pixels, position and pixel information. And so, and because of that, you can probably imagine that the pro of it is that it's extremely performant. Unless you have a Canvas element that's with a 10,000 by height of 10,000 pixels or something in which you'll just have a really large, like you'll be storing a lot of pixels.

[00:04:58]
So unless it's huge, you can probably imagine that scaling up the number of data elements is not going to impact Canvas. So if you want to, though it's not advisable, if you want to, you can definitely render tens of thousands or hundreds of thousands of data points with Canvas.

[00:05:22]
Because at the end of the day is stored as kind of those rows of pixel data. But again, not all advisable to be rendering tens of thousands of data points because even if it's technically capable, our human brains are going to have a really hard time comprehending it.

[00:05:42]
So we're not going to touch up on this in this workshop, but there is a very very important part of data. I almost think it's even more important the design side of data visualization than the technical side of data visualization. But today in this workshop, we'll only be covering kind of the coding side.

[00:06:04]
But there is, I think, even more importantly the design side where we make sure that our visualizations are comprehensible by the end person consuming and are not misleading. So, all of that, there's a different workshop for that all kind of touch up, touch on at the end of this workshop.

[00:06:30]
And then, the con for HTML5 Canvas is that it really is quite hard to create any interaction with it. Because once you've drawn the shape, You don't have any access. Canvas doesn't know that there's a specific shape at this specific position. So, if you can imagine, if you try to do a click event or a drag event or a hover event, there's no native browser support for that.

[00:07:04]
So you have to kind of build your custom, your own custom events for it. And that's kind of the con. It's a little bit harder to get started with Canvas. But I still wanted to cover these. And the way that I always like to think about it if you use kind of Adobe products, is SVG is like illustrator because all of the shapes is stored with kind of these positions and vector format.

[00:07:37]
SVG is like illustrator and Canvas is like photoshop. And, yeah, so I wanted to cover these two as the options that we usually have to create data visualizations on the web. And I also want to hear, make a small disclaimer that with D3, I think people oftentimes think that D3 is only for SVG.

[00:08:03]
And I want to give a disclaimer that D3 is actually, you can use D3 with any, I want to say anything that the browser supports. You can use D3 to interact with SVG. You can use it for HTML. It actually also has Canvas support. So, I want to say it's pretty web tech agnostic.

[00:08:30]
Yeah.
>> There's a couple of questions from chat.
>> Great.
>> If I have Illustrator file that I export to SVG, can I work with SVG with D3?
>> Yeah, great question. Yes, most definitely. We won't cover that in this workshop, but what you can do is, oftentimes, if you export it, there's the DOT SVG file.

[00:08:55]
And then you can either just copy and paste that as SVG string over and then use D3 to select it, and we'll talk about D3 selections later. That's one option I can think of, or another option I can think of is recreating that SVG string with D3. But the sure answer is, yes, you can definitely do that and that's a great idea.

[00:09:25]
If you have some shape that you want to draw that is a little bit more complex, then you can definitely do it in SVG. Usually, you can definitely do it in illustrator. And usually, usually it will export as SVG paths, and then there's a string that you can take two, then use it in the browser.