Building Custom Data Visualizations

Adding Aesthetics Exercise & Solution, Part 2

Check out a free preview of the full Building Custom Data Visualizations course:
The "Adding Aesthetics Exercise & Solution, Part 2" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

After adding textures to the chart, Shirley instructs on how to add drop shadows to the movie titles.

Get Unlimited Access Now

Transcript from the "Adding Aesthetics Exercise & Solution, Part 2" Lesson

[00:00:00]
>> Shirley Wu: The other thing that I want us to do is to just give a little bit of a box shadow. One of the things that I realize now is that I actually, if we have more time what I want to do is sort each of these curves. So that the ordering of these SVG elements are the ones that are the tallest, go to the very back and the ones that are shortest, come to the very front.

[00:00:28] So that you can see every single one of these curves. And I would just go back in and sort it by the absolute figure of a box office minus, the meme box. Then, let's copy over the drop shadow. So this is the DropShadow.
>> Shirley Wu: And I'm going to put that up top.

[00:01:09]
>> Shirley Wu: So this is the DropShadow. And I had a lot of help from Nadia's baby spike code. And so, these SVG filters a lot of them are defined by you have some sort of either you have a source coming in or it just starts out with just that filter and then you have a result.

[00:01:34] And so what we want to do with a drop shadow is, in our case, I just want to add a little bit of a color matrix filter. And what that does is whatever source it just applies this color to it, and this color looks, so this matrices is really confusing but how you read it is this is the channel for R,G,B,A.

[00:02:04] I don't really know exactly like how to manipulate it more than just this. And so, in this case what I'm saying is everything that comes in I just want to turn into 30% opacity. And then with this color matrix, I combine that with a GaussianBlur, and I say a standard deviation of 3, so it blows it out a little bit.

[00:02:32] And then, I say, so the result of the car matrix I take into here and I blur it and then I call that result colorBlur. And then, I just say let's merge the result of those two the colorBlur with the source graphic, and that's how you make a drop shadow.

[00:03:01] [LAUGH] I actually had a lot of fun, cuz SVG filters is one of those things that are-
>> Speaker 2: There's like eight ways to do a DropShadow.
>> Shirley Wu: Yeah. Yeah, so-
>> Speaker 2: There's like a million different ways that you can copy and paste off different sites.
>> Shirley Wu: Yeah, and Mark you know a lot about SVG, right?

[00:03:22]
>> Mark: Yeah.
>> Shirley Wu: So apparently there's now, also just like a filter call drop shadow. And that's the equivalent of running a GaussianBlur, offsetting that GaussianBlur by a certain amount. And then, I believe flood is just how the light is being cast onto the element, that's my best understanding of flood.

[00:03:47] And then, you merge all of that together and that's the drop shadow right here. And then I tried this at first and it was just way too harsh and I really preferred the way that.
>> Speaker 2: Right there you were just on it see it says feDropShadow.
>> Shirley Wu: Yeah.

[00:04:06]
>> Speaker 2: That's like super easy, it used to be like you were showing.
>> Shirley Wu: Yeah, so it used to. Sorry? Yeah, this one is basically if you drop shadow takes the place of this. And then now all we have to do is feDropShadow. And I actually tried this out first, and I just really didn't like how harsh it was.

[00:04:31] It was just really, really black, and it just looked really kind of horrendous. And so, that's why I tried out the way that Nadi did it. And I like how soft of a drop shadow it is. And so the way that we do it is just like with the textures, i have kind of defined this with the ID shadow.

[00:04:56] And i just say, i want to give a style of a filter and that filter is called url(#shadow) and that,
>> Shirley Wu: Should give me the drop shadows. So yeah, I think drop, yeah?
>> Speaker 2: Yeah, you can do like flood opacity it, which should do the same thing.
>> Speaker 2: feDropShadow.

[00:05:28]
>> Shirley Wu: Okay, so combine the feDropShadow with.
>> Speaker 2: Well, there's an attribute on feDropShadow, which is flow opacity and if you change that to point three or upward, that'll do the same thing.
>> Shirley Wu: Oh,is that said here or is it in the.
>> Speaker 2: No it's not. The SVG documentation on MVM is not exhaustive at all.

[00:05:51]
>> Shirley Wu: Is it this one, no, so I can say feDropShadow and go w3c?
>> Speaker 2: I don't know where would be a complete reference, but yeah, maybe w3 that would work.
>> Shirley Wu: Let me try this one maybe? feDropShadow. And this one says I can-
>> Speaker 2: There's flood opacity.
>> Shirley Wu: Cool, wait, unfortunately where does it say flood opacity?

[00:06:26]
>> Speaker 2: I don't know.
>> Speaker 4: Number three.
>> Shirley Wu: Number three, feflood, flood opacity.
>> Speaker 2: Yeah, there you go.
>> Shirley Wu: Wow, thank you so much. I didn't know this, I'm quite bad with VSG filters. [LAUGH]
>> Speaker 2: Nobody is good with, it's like so new that it's sort of, I mean it works in browsers, but-

[00:06:51]
>> Shirley Wu: I think one of those things I'm trying to get a bit better.
>> Speaker 2: When MDN isn't complete on a topic, you know that, pretty much, very few people.
>> Shirley Wu: It's pretty [LAUGH]. I hope to get better at them, I want to get better at like kind of composing them but I think for a lot of uses cases we can probably just like copy and paste the definitions from somewhere and then all we have to do is use that in a styling or something like that.

[00:07:22] But I like just knowing what I'm using. And that was the DropShadow. So it adds that little bit of a nice kind of pop effect. Does absolutely nothing for actually the visualization like, communicating anything across. But I think it's one of those, these are kind of the little details that help make a visualization just a little bit more pleasing to look at.