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.
Updating Data
Loading...
来自 New York University Tandon School of Engineering 的课程
Information Visualization: Programming with D3.js
36 个评分
New York University Tandon School of Engineering
36 个评分
课程 3（共 4 门，Specialization Information Visualization ）
从本节课中
Layouts and interaction
与讲师见面
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
One of the main reasons why we add
interaction to our visualizations is to allow the user to play with the data,
is to allow, for example, the user to get
more details of the data or the opposite actually,
see less of the data or focus in specific regions.
So, the user can guide and use those interactions to tweak the visualizations such that
the visualization will work better to his task or
the goal that the user is trying to achieve by reading your visualization.
One important thing or the main way that we can do that is by changing the data.
So, if you are filtering the data, for example,
what you can do is basically reduce and give
it a smaller subset of the data to your visualization to visualize.
So, now, the user is going to focus on only those specific data.
Or if you are trying to sum or to create new metrics,
you can update, compute those metrics,
and add those information to your data,
and then let the tree just read this data and
visualize again a new version with the updated data.
So, updating data is one of the main strategies to update
your visualization given some event or some action of the user.
How we do that, the first thing that we have to
remember is how the join thing in the tree works.
So, every time I do.data to bind data to elements,
the two you're going to create just three sets.
That is basically the intercept that contains
the new data that is elements that are in my data,
they are are not on the screen yet,
that I didn't create an HTML element.
Then, we have the Update data that is
basically those data points that already have something,
and maybe they just changed the value,
changed the size or something,
but I don't have to create new elements on the screen for them and neither remove them.
Finally, we have Exit that are basically those elements that's still on the screen,
but actually, they don't have any data point associated anymore.
So, those data point were removed from the data,
so now my job is to remove those elements from the screen as well.
The whole pipeline is,
basically we use our listeners,
we wait for the user to perform an action.
When the user performs an action like clicking something or changing some filter,
we're going to execute our listener.
That's basically this listener is going to go to the process of updating my data.
It's going to change the data,
so now the data will look like with what I want to visualize.
So, for example, if I'm filtering by weight larger than 200.
So now, I going to keep in my list only those that has weight larger than 200,
and I'm going to put the older ones aside,
so the visualization will visualize only those.
So finally, once we do that,
the data is updated,
we go through the same process again.
We just use our selection,
we call.data, and we pass the data again to the tree.
Once we do that, the tree will create the join,
and then we can use the original join to just update the elements that are on the screen.
But I can also use Enter to append
the new elements if the user created new elements through the process,
or use the Exit to remove elements from the screen.
So, it's helpful to separate those two things,
and remember that what is on the screen is one thing,
what is on your data is another thing,
and you always want to change your data and let the screen reflect.
It's hard if you try to change the screen without updating your data.
It's actually much easier to work with your data and let the screen,
whatever is rendering your drawing,
read your data and draw a new version of your visualization.
Another thing to keep in mind is what we call
either you can do a Permanent Update or you can do a Temporary Update.
What I mean by that is,
for example, if the user has the power of editing the information.
Maybe if the user changed the name or changed
any information that you have about the client and so on,
this may be a Permanent Update because it's
a new information that come and will replace the old one.
Some Update, for example,
filtering is a Temporary Update because
you're not really removing out those elements from your data,
you are basically hiding them for now.
So, you are just making a Temporary Update,
and in this case, what we often do is make a copy.
So, if I have a list with 100 clients,
and my new filtering has only 10,
my original list will continue to exist,
I'm going to create a new list with only the 10 that I want to visualize,
and I will provide that to the tree to create the visualization.
It's helpful to think in this way,
and in how your going to organize your code
around this idea that things can be created only once,
and things can be temporary updated,
and things can be updated permanently.
So, what one simple strategy is
separate things that run only once from things that can run multiple times.
So, for example, you can create
a function createElements that will create base elements from your visualization.
So, for example, if you are creating an axis,
you don't want to create a new axis every time the user update.
You just want to update those axes.
So, in this case,
you will create the axis on the createElements,
and then and only the Update will help in another function that,
for example, we have been using showData every time we want to draw something.
So, you could add this function just code that is able to update
the data that's able to run multiple times without breaking your application.
Then, every time your data change,
you can call this function with the new version of your data,
and this function will take care of drawing
your new visualization given your new state of your data.
It's also helpful to think how the data will be
accessed and transformed from other places.
Because as you call a function that's going to filter your data,
this function has to be able to access your data.
So, one strategy is to pass data as parameter to this function,
or another one is to create a store or some global variable,
or you can use more complex solutions,
but a way to store your data such that in
any place on your application you can just retrieve this data when you need,
modify it, and save it back.
So, that is one strategy that you can use as well to make sure that it
is easier to deal with your data around your application.
So, remember, updating data is
the most straightforward way to update your visualization given some action of the user.
Sometimes, you may want to update just
the- you want to remove or add elements or you can just update the values inside.
But remember that things that need to be updated,
which is data is for example,
your scale if the value has changed.
You may want to change your scale,
the domain of your scale because now you have a new domain.
Sometimes actually, the strategy may
actually just change the scale and don't change your data.
So, you just produce a new scale,
and by producing that,
you get a new state of your visualization.
But most of the cases,
you're going to go through the same process.
You change the data, you bind your data back to your elements,
and use Enter, Exit and Update to update your visualization given the new data.
