attr & style Practice

[00:00:00]
>> Now that we have had a bit of a chance to kind of dig around this. So, let's try and change some things around together a little bit, just to kind of get a bit more intuitive sense of what's going on. So the first thing is, I want to show how with the code that we already have written, we can pass in any data we want, and it will kind of just work in here.

[00:00:28]
So, for example, let's just make like an array, and i into this dot data. Let's make a new array and, let's just like pass in a bunch of random numbers. Let's say like 94 or 84, let me try like 120 and maybe just a 20. And you can see now it's only rendering kind of three of them, because only three of the rectangles have data bound on them.

[00:00:56]
So only three of the rectangles are showing up, and let's try having some more. And so I just wanted to kinda show you with select D3 selection, and data, and attribute, even just with this combination we can write something that's like quite dynamic. And, let's maybe we'll play around with like, actually, let's play around with the height a little bit, so let's go back to our bar data.

[00:01:42]
And maybe if we multiply it by something, the height changes around, you might actually have noticed that our bars are currently upside down. And that's because what I mentioned earlier about the SVG coordinate system is that, 0 starts up here, and then increases going down. So because right now we're not setting the y position, and it's kind of defaulting to 0 which is up here, and then it's just rendering the height.

[00:02:25]
Let's actually kind of impromptu flip that around and see if we can have the bar chart be rendering with it right side up. And so to do that, what we want is to have, So if you think about it, it's that we want these rectangles to kind of shift down.

[00:02:51]
And the amount that we want to shift down by is essentially, the height of this container minus, the height of our rectangle. For this one, we want to shift down by this much, and for this rectangle, we want to shift down by this much, so let's do that.

[00:03:12]
So for our y position we're being like passed in the bound data, and then let's just say, because we know we've hard coded our height of our container to be 100. So we just say 100 minus the bound data, there we go. So we've turned the bar chart the right side up, by adding this kind of little y attribute, we can also play around with the styling of the bar chart a little bit.

[00:03:41]
It's completely nonsensical, but maybe we just want to like give a dashed stroke. And so I'm gonna just say, I want it dashed 5 pixels, than empty 5 pixels, so this is what that means. And so you'll see that the stroke is dashed, like that. So this is how we can kind of use the attributes and styles and data binding together.