d3 events

[00:00 - 00:18] So every browser has a native set of event listeners that you can create that will call a callback function whenever that event is triggered. So you can listen for mouse events, keyboard events, scroll wheel events, touch events.

[00:19 - 00:32] There's more and more examples of this as browsers get more complicated. If you look at this MDM reference of these browser events, you can see there really are a ton of events.

[00:33 - 00:44] To start, we're going to use some mouse events. So you can go look at this list, we'll learn one at a time, just so things aren 't too overwhelming.

[00:45 - 00:56] And we'll start with a really basic example. So here we have our exercise in our JavaScript file.

[00:57 - 01:08] We're using this create event function and then we're calling it when the script is called. Basically, it has this rect colors array, which has four colors in it.

[01:09 - 01:37] And then we're creating a rect element for each one of the items in this array, binding that data to the rectangle, making each rectangle 100 pixels by 100 pixels, spacing them out so that each rectangle is 110 pixels to the right of the last one, and then filling them with this light gray color. So we can see these rectangles over here.

[01:38 - 01:55] So our exercise today is to have these rectangles change color so that they are this bound color on hover. And then when our mouse leaves that rectangle, it'll turn back to that light gray.

[01:56 - 02:18] So if we look at our rect variable here, we can see this is the D3 selection object that we've been working with previously. It has all of the handy methods, some of which we're familiar with, like select , select, call, enter, exit, join, all of these fun ones.

[02:19 - 02:28] The one we're going to learn for events is this on method. So the on method takes two parameters.

[02:29 - 02:55] The first parameter is the name of the event that we want to use and the second parameter is the function that we want to be called when that event happens. So we want to use the mouse enter event, and then we have this callback function that will happen whenever a mouse, the mouse, you're really only going to be using one on a web page whenever that mouse enters that rectangle.

[02:56 - 03:01] So this callback function will take two parameters. The first one is an event object.

[03:02 - 03:13] The second one is that data that has been bound to that element using this data join. So let's double check that that's what's going on.

[03:14 - 03:31] Let's log out the event and that data element. One thing that's kind of fun is to log out an object where the variable names are the key and the variables are the property.

[03:32 - 03:48] So if we look at this over here, we'll see an object where it's obvious what the things we're logging out are, just something I like to use. And then let's put our mouse over one of these rectangles.

[03:49 - 03:51] There we go. So here kind of easy to read.

[03:52 - 04:03] So we have this event, which is the mouse event and our D, which is the data bound to this rectangle. So if we mouse over the next one, we should see the next item in that color is array.

[04:04 - 04:11] So that's this cornflower blue. Pretty straightforward.

[04:12 - 04:22] What we want to do next is color this element that we just covered our mouse over, that color which is stored in this D variable. So let's do that.

[04:23 - 04:28] Let's look at this event object. So there's a lot of things in here.

[04:29 - 04:35] There's, where's your mouse on the screen? Is the control key being held down?

[04:36 - 04:46] These are all pretty standard if you're using event listeners in the browser. The one we're looking for here is this target or current target.

[04:47 - 05:03] And this is going to correspond to the element that we're hovered over. So let's just log out this event, current target and hover over one of these boxes.

[05:04 - 05:10] So we can see this is the rectangle we're hovering over. We have it over the second one first and then this first one.

[05:11 - 05:29] So what we want to do first is turn this into a do three selections. So let's just name that selection and then D3 select and then pass it that DOM element.

[05:30 - 05:39] Let's just log that out to make sure we're getting what we want. Yep, so we have this new D3 selection and inside that there's that rectangle.

[05:40 - 05:58] And then all we need to do now is to, similar to how we did up here, set that fill to this D color. So attribute fill and then set it to that D color.

[05:59 - 06:03] Okay, great. So now all of our rectangles are colorful.

[06:04 - 06:15] We can see these colors are corresponding to this array over here. What we want to do next is turn that back to that gray color when we move our mouse out of the rectangle.

[06:16 - 06:28] So that's pretty easy, pretty similar to what we did above, but we're going to use a mouse leave event. We don't need any of those parameters, so we're not going to name them.

[06:29 - 06:44] And then we're going to grab the selection object the same way we did above where we're going to do D3 selecting the current target of that event. Actually we will want that event.

[06:45 - 07:06] And then instead of filling it for that D color, we want it to be that late gray. So now when we hover around, we can see that we're only coloring the rectangle that we're hovering and if we're not hovering any, then none of the rectangles are going to be colored.