Bar chart

[00:00 - 00:10] Alright, so now that we understand how to use event listeners, we're going to go ahead and use that on one of our charts. We're going to start with the histogram that we created.

[00:11 - 00:17] We're going to add two interactions. The first is when you hover over a bar, it's going to turn purple.

[00:18 - 00:37] And the second one is we're going to add this tool tip to the hovered bar that displays the range of humidity within that bar and also the number of days that are in that bucket. So, if we go over to the code, we'll see we have HTML, CSS, and JavaScript file .

[00:38 - 01:01] One thing that's a little bit different is in the HTML file, you'll see this tool tip element where we have a place already made to input the range for that bar and also a place for the count. It might be a little bit strange to see both an ID and class on the same element, one rule of thumb that I like to use.

[01:02 - 01:19] Just to keep my code organized is I'll use an ID if I want to hook into the element in JavaScript and I'll use a class if I want to style the element using CSS. So you can see this tool tip has a class of tool tip.

[01:20 - 01:33] So if we go over to our styles.css file, we can see that there's already some tool tip styles in here. They're doing pretty basic things like making it absolutely positioned so it's not in the flow of the document.

[01:34 - 01:49] It has some padding, it has a background, it has a border, it has a smooth transition from one spot to another. And we have it by default at zero opacity.

[01:50 - 02:27] So if we comment this out, we can see our tool tip over here in the top left where we should be able to see it. Here we go.

[02:28 - 02:33] Here's our tool tip. Sometimes good sand blocks get stuck in one state.

[02:34 - 02:50] And we also see this pseudo before element which is this little arrow at the bottom here. We're basically creating a small square with a border and then rotating it 45 degrees so it sits at the bottom there.

[02:51 - 03:13] And we're also doing some fun styles for making humidity a little bit bolder and have a space on the bottom. So one thing that we want to change here is we see that our web page has vertical padding but our tool tip is showing up in the top left corner of our entire web page.

[03:14 - 03:50] So even if we had a lot of padding vertically, it's not following the chart around the page and if we're going to position it using JavaScript, we're going to need it to be in the right context of that chart. So the reason is the entire web page is the closest context for the tool tip and the easiest way to create a new context is to add position relative to another element.

[03:51 - 04:03] So for our wrapper element, we're adding this position relative and now our tool tip is going to move around within the context of that chart. Okay great.

[04:04 - 04:21] So the first interaction that we wanted to add is to change the background color of that bar to this purple color. And we can see here that we're coloring these blue by selecting all rucks within the class of bin.

[04:22 - 04:40] And so what we could do here is just say whenever you hover a bin, we want that rectangle to be purple instead of blue. So now I can see whenever we're hovering any of these bins, it's going to be this nice purple color instead of the default blue.

[04:41 - 04:52] And you saw in our last example that we changed the color of something on hover using a JavaScript event listener. Which is a great example.

[04:53 - 05:12] This is sometimes you have to decide between doing a JavaScript event listener and a CSS hover state or there's a few other states that you can use with CSS. If you can do it with CSS, it's generally a lot easier and fewer lines of code.

[05:13 - 05:19] But there's a lot of things you can't do with CSS. Like we can't populate our tool tip and position it using CSS.

[05:20 - 05:41] So for this we can use CSS and for this next part, we're going to have to go over to this JavaScript file. So this JavaScript is going to look very similar to what we did before.

[05:42 - 06:00] We are creating our bins, creating those groups that the bin set in, drawing those rectangles, drawing the text, drawing that mean line, and then creating our axes. So what we want to do next is create our interactions.

[06:01 - 06:21] So first we're going to, let's store our tool tip in a D3 selection because we know we're going to have to change some things about it. So let's just D3 select and we gave it an ID of tool tip.

[06:22 - 06:50] So let's go ahead and throw that in here and remember the hash prefix means we 're looking for anything with an ID of tool tip. So now that we have that stored, we're going to go ahead and create two mouse listeners so we want these to be on our, let's throw them on our bin groups because that 's what we're binding this data to.

[06:51 - 07:25] So we're going to do bin groups on mouse, enter, and then let's go ahead and before we define our callback functions just in line here, but it's sometimes a little bit easier to define them afterwards. So let's go ahead and create our on us enter function.

[07:26 - 07:43] And remember we're getting the event and the data point there and let's also create a mouse leave function. And then we'll add these as the callback for these event listeners.

[07:44 - 07:56] All right, so what do we want to do when our mouse enters one of these groups? We want to find the X and Y position.

[07:57 - 08:10] We want to update the text in our tool tip and we want to move our tool tip to that X and Y position. So let's first go ahead and change the range for that tool tip.

[08:11 - 08:17] Basically we're going to change the text in here. So we're going to do tool tip dot.

[08:18 - 08:28] And then another thing to keep in mind is that we don't want to change the text of the tool tip. We want to change the text of this specific range span within our tool tip.

[08:29 - 08:37] So we're going to select within our tool tip something with an ID of range. And then we want to change the text.

[08:38 - 08:47] Let's change it to high really quick. So when we're bouncing over any of these rectangles, you can see our tool tip has changed.

[08:48 - 09:13] But instead of high, we want it to show the number, the lowest part of that range, the highest part of the range and then a hyphen in between. Sometimes if any easier to create strings like A to B or two to three by creating an array and then joining them with a hyphen.

[09:14 - 09:33] So say it was one to two. Not sure what's going on there, but we can see that string was a little bit easier to parse if we just had them in an array.

[09:34 - 09:44] So this first part will want to, let's look at this data element again. So console log this data.

[09:45 - 10:06] So this doesn't look right. We don't want 40 days in here.

[10:07 - 10:11] For some reason, this looks to be, oh no, this is great. So these are bins.

[10:12 - 10:18] So when we hover over one of these bins, we're seeing all the data points that fits within that bin. So this is great.

[10:19 - 10:46] So within this bin, we have every, we have an array of every data point and we also have an X zero and X one, uh, attribute, which we're not seeing in the code sandbox console, but you will see in the dev tools of your browser. So let's just test that, let's grab the X zero and the X one attribute of that data point.

[10:47 - 10:56] There we go. So if we pull this down a little bit, we can see that this bin goes from 0.55 to 0.6.

[10:57 - 11:09] All right. So the next thing we want to do is let's change that account within our tool tip.

[11:10 - 11:19] So we have the range and we also have the count of the number of days. So this is going to look very similar to the range.

[11:20 - 11:31] But instead of selecting range, we want to select count and then we want to change the text to the length of that D array. So there we go.

[11:32 - 11:41] There is our populated tool tip. So all we really need to do now is to move it so that it sits over the bar that we're looking at.

[11:42 - 12:02] So this is going to look actually very similar to how we position these bars in the first place. So we add this rectangle and then we use the X scale for the D zero and we added that half of the padding in between the bars.

[12:03 - 12:23] So let's go ahead and assign an X and a Y variable that X is going to look like this. And a quick reminder that our tool tip is outside of our chart, which means that it's outside of our bounds.

[12:24 - 12:42] So if we have a left margin, then it's not going to be taken into account. So we'll want to add dimensions that margin left to this.

[12:43 - 12:50] Let's go ahead and create a Y variable as well, which is going to look very similar. So we're going to use the Y scale.

[12:51 - 13:03] It's actually just go up here and see what we did for our rectangle. And then we really just want to use that Y scale and the Y accessor function for our D element.

[13:04 - 13:13] And we also want to add the top margin. All right, so it's a mover tool tip.

[13:14 - 13:19] We're going to want to set a style. So we grab our tool tip and we set this style.

[13:20 - 13:30] Let's do a transform. And then we want to translate it horizontally and also vertically.

[13:31 - 13:45] And we set pixels because this is a CSS property. So let's go ahead and just set X and Y and see what happens.

[13:46 - 13:53] All right, so now when we hover, this is great. So our tool tip is following along with our bars.

[13:54 - 14:01] It's a little bit off center. So there's two things that are going on here.

[14:02 - 14:14] One is we can see that the left side of our tool tip is lining up to the left side of our bar. This is because what we have for X here is only aligning to the left side of that bar.

[14:15 - 14:27] What we need to do is move it over half of the width of our bar. So we also want to add basically we want the width of the bar and then to divide that by two.

[14:28 - 15:01] So we'll want X scale d dot, oh wait, d dot X0 plus X scale d dot X1 divided by two. But actually we want to subtract what we want to do is we want to find the left side, find the right side, subtract the left side from the right side, which is the width of the bar and then divide all of that by two so we get half of the width of the bar.

[15:02 - 15:12] So now we can see our tool tip is lined up with the middle of the bar, which is great. But it's lined up not in the right way.

[15:13 - 15:27] What we want is our tool tip to also move back half of its width and up 100% of its height. This is a little bit complicated, but bear with me.

[15:28 - 15:42] So within this translate function we can use calc, which is a way to get a little bit fancier with CSS. So for the X we want to move our tool to back 50%.

[15:43 - 15:57] So what we can do here is actually just do minus 50% and then add that pixel value. So here we can see that we're over that pixel value and we have to move back 50 %.

[15:58 - 16:14] So calc is a way to combine CSS numbers that have different units. So this percent is going to be percent of the elements width and pixels is just straight up number of pixels.

[16:15 - 16:27] So calc is a really good thing to know if you're going to want to do some fancy CSS like this. And the last thing we'll need to do is move our tool tip up basically 100% of its height.

[16:28 - 16:36] So it's the same thing. We want to move it up 100% and then add that number of pixels.

[16:37 - 16:43] Okay, perfect. So this is exactly what we wanted.

[16:44 - 16:52] Our tool tip is sitting right above the bar. It's telling us the range and it's also giving us the count of the days.

[16:53 - 17:12] One thing that we want to fix is because we're using a CSS selector our bar turns back to blue after we un-hover it but our tool tip doesn't go away. So in order to make it go away we're going to have to fill out this unmask leave event.

[17:13 - 17:32] So basically all we need to do here is find our tool tip and set it to opacity of zero. One thing that we're missing is we never set it to one on hover.

[17:33 - 17:51] In fact we kind of just cheated and took out this selector, this CSS property here. So let's add that back in and then have our tool tip show up when we have this mouse enter event.

[17:52 - 18:00] So tool tip style opacity of one. It's showing when we mouse out it goes away.

[18:01 - 18:07] Yeah, pretty great. And hopefully it seems pretty straightforward.

[18:08 - 18:18] Basically what we did was we grabbed our bin groups. We added a mouse enter listener and a mouse leave listener and our mouse enter callback function.

[18:19 - 18:50] We used that data that we bound to that group. We did our tool tip with the correct text and then moved it over to sit inside of that bin and then use calc in our translate string to move it half of its width over and 100% of its height up so that it was sitting right on top of that bar.