attr & style Solution

[00:00:00]
>> I hoped that exercise when pretty okay, and so now let's do the exercise together. So, first thing we want to do is we want to go ahead and use D3 to select all of these paths, so let's do that. Actually out of habit let's first select our SVG element, then let's go ahead and select our SVG element, then out of the SVG, let's pass in a string for selecting all of our paths within that SVG.

[00:00:43]
And, then let's bind our movies data, so this is our movies data. So let's go ahead and bind our movies data, and actually, let's take a look at what this looks like. Let's console log this really quickly, and let's take a look at what that looks like. So this is what we have, and as of right now for just right now we are only concerned about this _groups.

[00:01:21]
If we open this, ooh did you see that? It's kind of interesting, isn't it? So it's saying, that we have 135 movies, and we have five paths, and there's an empty 130, empty x 130. So, in the next notebook, we'll kind of talk about what this means, but for right now, let's just take a look at these paths, and then if we click on this, we can see this is our paths.

[00:01:52]
And, let's take a look at what's been bound. And so yeah, so we have our first movie and then if we open up the second one at the very bottom we have our second movie, which is Independence Day. And we can see right here that we have genres.

[00:02:12]
And so that's what we need to do the fill, so let's go and say fill, and let's go and say, passing a function and that function will take in as input the data that's been bound. And let's say that we are going to use that look up the colors look up, and let's say I want to look up just the first genre, and fill with that.

[00:02:49]
Awesome, and I'm going to put in as, if we can't find the genre and the colors, then we're going to use the color for other. And so that's our fill, and just for fun, let's do the same thing for the stroke. So let's just do the first genre look it up in the colors object, and if that doesn't exist use the other color.

[00:03:29]
And you can probably noticed that our stroke did nothing because they're the same color. So let's use this attribute called fill-opacity, and let's put the fill-opacity at 0.5. And then we'll see we have this, which is our petals have a kind of faded fill and then we have the stroke on the outside.

[00:03:54]
Let's just make our stroke a little bit bigger, stroke-width is 2, there we go. And so this is how you can use D3 selections, data binding, and attributes, to kind of draw the shapes that you want into the browser.