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.
Zoom
Loading...
来自 New York University Tandon School of Engineering 的课程
Information Visualization: Programming with D3.js
22 个评分
New York University Tandon School of Engineering
22 个评分
课程 3（共 4 门，Specialization Information Visualization ）
从本节课中
Layouts and interaction
与讲师见面
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
In this video, I want to talk with you on how can we add Zoom to our page.
By Zoom, what we mean is that you have
two options: One option is to just make thing bigger.
So, think about accessibility.
So, you select a region,
and then you make the thing larger,
so is easier to notice details that we have on that specific visualization.
So, that's one option.
But we also have an alternative solution.
In this alternative solution,
what we do is that we actually manipulates the scale.
So, when we zoom,
what we do is not that we make things bigger,
but we make the space bigger so we can see more detail.
So, we see that now in the second options,
the dots are moderately spread because we changed the size of the scale,
and if you look in the top,
we have this small portion now is covered by this large portion.
So, we have more details on the axes.
We can get more information and read the information more accurately.
So, that's one option to use Zoom,
and most of the time it's the one that we are going to be using because by doing that,
we can actually provide with the user more information.
It's not just making easier to the user to see what was there already but it's
actually drawing the chart in a way
that now is easier to the user to read the information.
The way we do that is by using a behavior API from d3 called d3.zoom.
d3 will create all the elements and bind all the events that we need,
in order to make the Zoom work.
Basically, what the Zoom does is add the listener to listen to the wheel of your mouse.
So, if the user scrolls up and down,
so now d3 will listen for that and will be able to zoom in and zoom out,
or the user can also pan,
that is, the user can click and drag around,
and move around the space,
so think about as a camera looking around your visualization from closer.
So, those are some of the events that d3.zoom we're going to be listening
and going to help you to deal with and
manipulate your visualization to react to those changes.
So, to create that,
the first thing that we do is create our Zoom behavior,
and then we select the group.
So, here I'm actually selecting my svg,
and I gave it an ID.
So, that's just to make sure that the Zoom will work in any place of my svg.
I select it, I do.callzoom and I'm done.
Now, I already have the listener reacting to all the events in my svg.
The problem now is that I am not reacting to those events.
So, I have to write codes to react to when
the user do something that is related to zooming,
and to do that, we can add an event called onZoom.
So, this means that every time the user do something that is supposed to change the Zoom,
we're going to call this function.
One important feature of this function is one thing that come on the event,
so d3.event, that, again,
contain informations about the event that just happened,
and one thing inside this thing that is really helpful is the transform object.
The transform object has two functions;
one is to give me information on where I am,
so what's the scale that changed in the zoom,
and if they use a pan,
what's the translation, what's the x and
y that has been translated from the original position?
But they also provide some helper functions,
and one that is very helpful is the rescale.
So, you can ask the transform to rescale the scale that you already have.
So, for example, I had an xscale when I draw my visualization.
Now, what I want to do is to pass this to the rescale X,
and rescale X will return me
a newer scale based on the informations of panning and zooming,
so now, I can use this newer scale to draw my data,
and I basically going to get the data drew in
this new space based on the zoom and the position that the user changed.
You can do the same thing for the yscale.
Once I have those scale,
I can work using the same techniques that we have seen to update our data,
to just update the scales and get a new state of my visualization.
The transform will also contain three information that is important.
K will represent the scale,
that means, how much I change for the original scale.
One is the initial scale,
and then numbers that are below one is basically the user is getting further apart,
and number that is smaller than one,
the user are getting closer,
so you are increasing the scale,
or reducing the scale.
The translation is, basically,
where the user moved,
if the user panned or did something like this.
Sometimes when we scale,
because the way scale works,
you may also pan a little bit around the original region,
so you're going to need just two informations to draw the newest state of
your visualization after the Zoom action that the user performed.
So, Zoom is a very helpful technique in order for us to get details of your information.
You can use Zoom to zoom into dots, for example,
you get see if there are better clusters of dots.
You can use Zoom to zoom into line charts,
for example, to look in a specific section of your line chart.
You can expand and then focus on that specific region of your charts to see more details.
So, as I said,
it's much more common to change your scales,
or to reposition your elements based on
the Zoom than actually just increase the size because then you can
provide more context information and more detail shared user
when the user is zooming harder than just make things bigger.
That's the whole idea of changing your scale to get a new state of your visualization,
instead of just making it bigger.
