Building Custom Data Visualizations Building Custom Data Visualizations

Adding Aesthetics Exercise & Solution, Part 1

Check out a free preview of the full Building Custom Data Visualizations course:
The "Adding Aesthetics Exercise & Solution, Part 1" 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:

In this exercise, Shirley uses the Gestalt laws to strategically add texture using the textures.js library to the movie data visualization.

Get Unlimited Access Now

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

[00:00:00]
>> Shirley Wu: Now what I want to do is go through the code together for creating these textures and drop shadows. So I want to add some background textures for every summer and winter holidays. And then I want to add drop shadow to each of the movies to kind of make them pop out a little more.

[00:00:19] And instead of decoding them, I'm just going to go through and talk through the code a little bit. So the actual full code is in index.js if you ever want a reference to them, but let us just I'm just going to copy and paste over the code. And I'm going to talk through them.

[00:00:48] So here is the textures code. And so what I've done here is I've created a data structure of just the holidays. And all it does is give me back an array of every summer and I define that as between June and August and every winter between November and December.

[00:01:16] And then I just say whether it's summer or whether it's winter. And then what I do with that is I create two textures. So this is textures.js. And I tell it that I want some lines, and for the summer, I want to stroke it by an orange. And for the winter, I want to stroke it by a blue.

[00:01:44] Unfortunately, as far as I know, I don't think I can do SVG patterns. I don't think I can do strokes or fills dynamically, I could be wrong. But it seems like with SVG patterns, I have to create two different ones. Or at least with this textures.js library, I have to create two different ones.

[00:02:06] Even though they look exactly the same and only the stroke is different. But then I call these two textures on the SVG. And underneath the hood, what that is an and SVG def element. And we can take a look at that really quickly together. SVG patterns are defined in these tags, these elements called defs.

[00:02:34] And so we'll define them and we'll say in this case textures.js is creating a pattern. And then it's just creating this path with these hash lines. And then we give it this unique ID. And the way that we use them is in the SVG I will,
>> Shirley Wu: I will create some rectangles.

[00:03:06] And those rectangles have x coordinates of, and the rectangles are defined by the dates, the bounding dates that I gave it earlier. And then it just goes from the very top to the very bottom of the SVG window. And the way to use those textures is to just say fill, and then a call url on the texture we define above.

[00:03:40] So in this case I'm saying if the type of the holiday is summer, grab the url ID from the summer texture. And if it is winter then grab the url ID from the winter. And I say instead of filling by some solid color, fill by this pattern. And that's how these textures are working.

[00:04:05] So this is really fun because now there's some context like look how many of these like Avatar is in the winter towards the end of winter that must be December. And Star Wars, and actually all three of these Star Wars movies it seems like are in this December timeframe.

[00:04:30] And some of these like summer blockbusters are either right in the middle of the summer or right like at the beginning of like, this probably Memorial weekend. And so, I really like these textures to give context of, we already have this x axis so we can look and we can see which years they are.

[00:04:53] But now with a little bit of additional information, like the gestalt laws of grouping we were talking about earlier. And we talked about this thing called enclosure. And how you can like shade certain areas and that will look like an actual grouping. So I think this is also doing that.

[00:05:15] Yeah and I think this is also doing that.
>> Shirley Wu: So that is textures.
>> Speaker 2: And that's a package that you pulled in?
>> Shirley Wu: Yes, textures.js, it is here in my dependencies down here. Textures.js and up at the top I import it. And again, a little bit more work but I'm still not too bad to just do kind of that pattern and the crosshatch pattern.

[00:05:48] Or just hatches? Hatches pattern.
>> Speaker 2: And if you type in SVG patterns there's like a bazillion patterns.
>> Shirley Wu: Is there?
>> Speaker 2: Yeah, just Google SVG patterns and then like hero pattern is right there.
>> Speaker 2: And you could just put those into your defs and point the URL out.

[00:06:10]
>> Shirley Wu: Wow, I didn't know about this.
>> Speaker 2: There's eight of these sites that have like hundreds of different.
>> Shirley Wu: This is amazing.
>> Speaker 2: Really cool.
>> Shirley Wu: Yeah.
>> Speaker 2: Cuz I never thought about overlaying these over your-
>> Shirley Wu: Yeah.
>> Speaker 2: Charts, it's really cool.
>> Shirley Wu: Yeah, I mean I wouldn't recommend the busier ones.

[00:06:32] [LAUGH] I would keep it relatively simple, but yeah, this is really cool to see. Actually, I really like this one. [LAUGH] But, yeah, it could give really good additional context to use one of these. Thank you for sharing this one, hero patterns. I think I know about textures.js just cuz it has built in D3 support, pretty much.

[00:06:57] Or it's, I think, written with D3 is what it looks like, but these are great. Because just like you say, just stick them into the defs, give it a unique ID. And then you can just reference them from fill, and you say like url, and give the unique ID, and that's all it takes.

[00:07:14] [COUGH] Using the pattens is not hard, it's just writing the patterns, defining the patterns, that's just a little bit more work.