Loading...

Brushing

Course video 66 of 72

Information Visualization: Programming with D3.js

纽约大学坦登工程学院

课程 3（共 4 门，信息可视化专项课程）

In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.

查看授课大纲

教学方

Enrico Bertini
Associate Professor
Cristian Felix
PhD. Candidate

脚本

The three also provide us with some advanced techniques to provide

interactions to the user.

And one of such techniques is what we call brushing.

And by brushing, imagine a situation where we have a scatter plot like this and

you have those dots in the middle and you want to select them.

So it's nice if you can just click and drag, and create the region, and

tell the system, okay, that's the region that I want to select.

That's much easier if you have hundreds of dots there.

You don't want the user to keep clicking in each dot.

So brushing is a very reliable technique to do that and

is very simple as well to implement this feature.

And the first thing that you going to need is the behaviors.

So they pre-provide us with some behaviors that's what adds some complex

interactions to our applications.

And d3.brush is one of those behaviors, and is able to create and

manipulate and make sure that everything that you need to brush is in place.

So we just do d3.brush and we get our behaviour, that's what we need.

So, for example, here I'm creating my brush object and

then I am using d3.brush to create this object.

And then finally, I am selecting a group on my visualization.

So usually the behaviours we're going to append either to a group or the itself.

So if you want the behavior to work in some specific region,

you may want to add to a group.

So one of the reasons why we add the brush to group is

because it allows us to control the order that you're going to show the square.

And what I mean by that, so imagine that you have your visualization, and

now you have your dots.

Those are the dots that you are showing your visualization.

So if the user is brushing, you're going to draw a square.

And you have two options, you can draw the square on top of those dots, or

you can draw the square on the back of the dots.

And the way I decide if it's on top or

on the back is basically the order that we have for the group.

It's basically the order that we created the group

to which we are adding the brush.

So here I'm selecting a group.

I created this group somewhere.

And now I'm selecting this group by using its ID.

And then I do .call(brush) and I am done.

That's all I need to make the brush work.

So if I go to my visualization right now, I'm able to Click+Drag and

I'm going to see a square happening in the screen.

But now we have the next problem.

That is, okay, so, now, it created a square, excellent.

So, now, how do I get the dots that are behind the square?

That's where we have implement and it's not that complicated because

d3 will provide us with an event that's called brush.

So, this means that you can do brush.on and you're going to list in for brush and

that just basically mean that the user is drawing the square.

So, every new update of the square we're going to be calling this event.

And the first thing that we need is from the d3 event.

So, remember,

d3 event contains information about the event that just happened.

And for the brush, one of such information is the selection.

And the selection is basically the coordinates of the square

that the user just drew.

So using those coordinates, now is much easier.

I can just check if the position of my dot is we think is the square.

And if the position of the dot is inside the square, I am done.

I know that this dot has been selected.

And how these coordinates work?

d3 will provide me two coordinates.

One is the top left of the square, that's going to be,

so you are going to have an array.

The first element of your array is also an array with two values,

that are basically the x and the y of the top of the square.

And then the second element of array is again an array with two values that is

the x and the y of the bottom right coordinate of your square.

And by using those two coordinates, I can get any other information,

like the width of the square, the height of the square, the position of the square

on the screen and then decided if a dot is or not inside these coordinates.

If I want to get the specific coordinates, remember that there's two arrays.

So at first we're going to use, for example, choords,

imagine that coord is my coordinates.

0 to get say, I want to look in the top corner.

And then I can again select my next element that's going to be either x and

y depending on the information that I'm looking for.

So remember brushing is interesting technique when we want to select visions

and it doesn't work only for element like dots or squares.

It can also work for line short.

If you have a line short you can brush in one access and

select the specific division of the line short to either zoom in or

show the details of that specific region.

And once again, I just have to use the selection of d3 to define

where is the selection that the user created.

And then decide if my data points are or not inside that specific region.

关于 Coursera

课程、专项课程和在线学位均由全世界一流大学和教育机构的顶尖授课教师教授。

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取