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

Shirley offers other ways to add aesthetics into charts with patterns, gradients, textures, SVG filters, and others. The work of Nadieh Bremer is introduced to help give context to the importance of these aspects.

Get Unlimited Access Now

Transcript from the "Adding Aesthetics" Lesson

[00:00:00]
>> Shirley Wu: I want to give some more non D3 SVG functionality. And I want to give these as options for giving either more context or for improving aesthetics. And so, some of these are, one of the things I'm a fan of is patterns and textures that I showed earlier.

[00:00:25] And so there's this great library called textuers.js that makes kind of creating SVG textures really easy. This is the part where I'm going to show a bunch of things from Nadieh, whose website is at Visual Cinnamon. Because I think she is the queen of making beautiful things with SVG filters and gradients.

[00:00:53] And just basically using SVG technology, web technology to make her visualizations a lot more aesthetically pleasing. So with SVG you can also do gradients. And one of my favorite ways I've seen someone use their gradients is, I think this is a kind of a modified version of a chord diagram we saw earlier.

[00:01:17] As you see in chord diagrams, there's a source and a target, and usually you might color code the source and target. And so what she's done here is start out from one color as a source, and then as the chord is going towards its target, make the gradient blend into the target color.

[00:01:38] And I think that's a really beautiful use of gradients. Text along a path, it's one of those things where it looks like it'd be really hard to draw text along a curve, or something like that. But SVG actually makes that really, really easy. So this is another example from Nadieh, where she places kind of these text around this, I guess it would be a donut chart.

[00:02:10] And it just looks so much better than if she had just, had just like text that was just straight, and like kinda comes off the donut chart in like weird angles. And they just makes it so much more aesthethicly pleasing. So SVG filters, I'm doing like, using a combination of blurs and I think, offsets, and color matrices.

[00:02:40] And there's, a lot of these different SVG filters are available. And the ones that I think I see the most examples of are these drop shadow effects. And then this is again Nadieh where she shows the different layers. So she also has the center aligned and she wants to show how much a data point is above or below that center line.

[00:03:10] And the way that she does it is creating these kind of drop shadow effects, so that it looks like these layers are stacked on top of each other. And then clipping and masking, which is kind of having kind of SVG, so being able to like draw something on SVG, and then clip that by another path or something.

[00:03:35] And if you have the time, I would highly recommend you read the making of behind this visualization. Because Nadieh uses both the SVG filters and clipping, and masking to achieve these effects. And so this is called baby spikes. This project is called baby spikes, and she has in her blog, kind of the making of the baby spike.

[00:04:03] And she talks about kind of her process, exploring in R. And then she also talks about kind of how she did those drop shadow. And so, for these effects, she actually made this ring with the drop shadow effect. And what she did is actually she clipped this by the shape of these spikes.

[00:04:35] So, that's another, I think she is absolutely amazing at kind of looking at what technologies that are available and thinking through them. And kind of coming out with a way to do, a way to make them her own. And kind of like using them together to help make her visualizations more effective, more communicative, more aesthetically pleasing.

[00:05:02] So, she is like a constant source of inspiration for me, I wanna get to her level. Yeah, these are some of the SVG filters and stuff that I wanted to share with you.