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.
Brushing
Loading...
来自 New York University Tandon School of Engineering 的课程
Information Visualization: Programming with D3.js
个评分
New York University Tandon School of Engineering
个评分
课程 3（共 4 门，Specialization Information Visualization ）
从本节课中
Layouts and interaction
与讲师见面
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
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.
