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
… [Trackback]
[…] Find More here|Find More|Find More Informations here|Here you can find 15023 additional Informations|Infos to that Topic: codingvideos.net/mastering-data-visualization-with-d3-js-event-listeners-packtpub-com/ […]