Mastering Data Visualization with D3.js : Event Listeners | packtpub.com

00:01 you

00:07 hello and welcome back to master in data

00:10 visualization with d3.js in today's

00:13 video

00:14 the first of section five we're going to

00:16 take a look at interactivity and

00:18 animations in this section we're going

00:21 to see how to add interactivity with

00:23 event Lister's how to use animations to

00:26 smooth our transitions and add tooltips

00:29 how to pan around it zoom in on data how

00:33 to select data from upset using brushes

00:36 and finally how to drag and drop data

00:39 manipulating it on the fly in today's

00:43 video we're gonna look at event

00:44 listeners the building blocks of all of

00:47 the different kinds of interactivity

00:49 we're going to be doing in this section

00:51 in this video we're gonna take a look at

00:54 adding different kinds of event

00:55 listeners to our data and our plots how

00:59 to use transitions to smooth animations

01:01 between different kinds of

01:04 visualizations and how to use easing to

01:07 apply gentle interpolations between

01:10 changes in our data let's dive right in

01:14 take a look at a set of data so here you

01:19 can see our chord layout showing the

01:22 trade between different provinces that

01:25 we examined earlier in section 3 in this

01:28 video we're gonna add some animation

01:31 here to highlight different bands here

01:34 let's take a look at our code so this is

01:38 our same old plot chord function that we

01:41 examined earlier in section 3 and

01:44 everything here is exactly what we saw

01:46 earlier except for one extra line here

01:49 when we add our chords using those

01:52 ribbons we're actually going to add an

01:55 extra bit of information

01:57 this class of trade and we're going to

01:59 make sure that each of these ribbons is

02:02 given the trade class that's going to be

02:05 important because we're next going to

02:08 use this function here called add mouse

02:11 over to select all of these trade class

02:14 objects and apply a mouse over effect so

02:19 using the simple on

02:21 can say when the most passes over each

02:24 of these trade classed objects apply

02:28 this function select them and set their

02:31 opacity to 0.5 so let's try this now

02:37 so you can see that doesn't return

02:40 anything but now when we pass over these

02:44 objects they set their opacity to 0.5

02:48 I've said all of these things to have

02:50 half opacity just by passing over them

02:54 and if we select one of these objects we

02:58 can actually see if we take a look here

03:00 at the event listeners we've now added a

03:04 mouse-over and its handler is that

03:07 little function we've rigged so you can

03:11 see that what it does is set these

03:12 things to have partial opacity but it's

03:16 not really a useful thing to have it

03:18 stick around so if we apply this and

03:22 then have it so that every time you

03:24 mouse over something it permanently gets

03:26 set okay that's not a particularly

03:28 useful thing and what we can do is add

03:33 another event here Mouse out is when the

03:37 most pointer moves outside of this

03:41 object and we can simply set the opacity

03:44 back to one so if we do that

03:49 can call most over and then add Mouse

03:52 out

03:54 now it goes semi-transparent and back

04:00 the transitions get reversed when the

04:03 most leaves that object so now you can

04:06 see it's actually highlighting which one

04:09 are most is hanging over can imagine

04:12 this is a useful ability to have to be

04:15 able to select data like this and later

04:18 in this section this is really going to

04:20 be the building blocks of everything we

04:22 do in terms of adding interactivity now

04:25 you can see though when I go in and out

04:28 here it goes instantly from 50% opaque

04:33 to 100% opaque and back again

04:37 you might want that to animate though in

04:40 a much smoother more kind of organic

04:44 fashion and we can actually do this

04:47 using transitions you can see here I've

04:50 added this object here called T

04:53 transition and it has an easing

04:57 associated with it as well as a duration

05:00 let's see what happens when I use this

05:03 transition

05:10 so now what I've done is I've said to d3

05:14 when you make this change do it over a

05:19 finite amount of time don't do it

05:21 instantaneously and ease into it

05:24 linearly so step between 0.5 and 1 in a

05:29 linear fashion over about a millisecond

05:33 and so now you can see watch what

05:35 happens when I mouse in and Mouse out

05:38 here

05:39 you can see instead of instantaneously

05:42 flashing to perfectly transparent it

05:47 transitions and you can also see this

05:51 error that I caught if I come in and out

05:54 here quickly enough that's because I'm

05:56 going in and out of this object faster

05:59 than this transition elapse so in order

06:02 to do this safely you actually have to

06:05 add a try-catch statement in your mouse

06:08 over of it in order to catch whether or

06:11 not you're still in the process of a

06:14 transition and what to do in that case

06:16 in this case you'd probably just want to

06:19 allow it to complete as usual