Practice: Updating Data

Loading...

En provenance du cours de New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

7 notes

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

7 notes

Cours 3 sur 4 dans Specialization Information Visualization

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.

À partir de la leçon

Layouts and interaction

Listening to Events8:22

Practice: Listening to Events13:20

Updating Data7:17

Practice: Updating Data9:31

Practice: Brushing10:33

Practice: Zoom9:34

Practice: Creating Tooltips9:23

Practice: Creating Linked Views11:18

Rencontrer les enseignants

Enrico Bertini
Associate Professor
Computer Science and Engineering
Cristian Felix
PhD. Candidate
Computer Science and Engineering

In our previous video,

we created this visualization with

some elements on the side that allows us to edit the visualization.

So if we could click here,

we would get someone here and we can change

the weight to 500 for example and then the chart's going to reflect that.

But now what we want to do is if the person is not there,

so if I type here a name that doesn't exist in my visualization,

I want to add this new person so we can see how we can add the new elements to our data.

One way to do that is basically using the same function that we have here originally.

We had the save function where we check if

the client exists and if the client exist, we set the weight.

What we can do, is do something if the client doesn't exist.

So that's going to be the case.

So I type the name here that is new,

the system doesn't know it.

What I can do is, I can just add these clients to my data.

I can say data push,

name and we're going to give it the name that the person wrote

and weight and we're going to give it the weight the person wrote.

So by doing that, we're going to add

this new element on the data. Then what's going to happen?

We're going to call showData here.

So, showData is going to go down to our original code.

Since this is a new element,

the enter function is going to be in place.

So, d3 is going to call the enter function,

only forges new element because that's what enter does.

Then, it will say, "Okay.

Let's add the new rect,

let's set some styles and not in the list and introduce a style."

That's why the list n is two here.

It's because it only added once.

So, once you create the element,

you add the list in it, you don't keep adding every time things afresh.

Then finally here, we're going to work with

all the elements so we are using merge here to say, "Okay,

now you're going to take all the elements that we have in the,

either new or the ones that are already in

the data and you're going to update the width and height.

Also, if you need to translate it,

they're going to translate to the new position."

Just going to update all the elements that I have and that's it.

We don't really have to change anything here because all the code is there already.

So what we can do is test if it's working.

So we're going to add here for example Mike.

Mike is going to have 300 weight and you see that once I add the element,

I get Mike here on the bottom.

What the d3 did is that it adjusted,

since we are using scales and everything,

it basically adjusted itself reducing the size of

the bars in order to fit Mike on my visualization.

You see that I didn't have to change much because

the enter function is already taking care of adding new elements.

The difference is that originally,

we are adding new elements but they're basically all the elements that we have.

Now, we are just working with every new element.

We're going to call this part of the code.

So, always keep in mind that whatever you write here after enter chained,

you're going to only run for new data points that you add.

But now, we want to do something else.

We want to filter the data and we want to say, "You know what?

I want you to be able to see only people that is above a certain threshold."

So, what you can do,

so here I already created one HML element that is

a number input that basically allow the user to type some minimum weight.

You want to show the user only if the user has a weight that is

above whatever value the user puts here.

Then finally here we have a function that filters some data.

In the same loading function that we had originally,

we are adding another select.

So, we are selecting the mean weight.

So mean weight is this input.

We are selecting the input and we are adding one event that is called change.

Change is going to happen every time the user changes values.

We don't want the user to click anything.

But just changing the value and leaving this input,

the system is going to update the visualization.

How will it do that?

So here we are using this.

So remember that in this case,

this is this input.

We're going to check the value.

We're going to load the value here and we're going to filter our data.

So what this filter function does is that it just go through

all the data points that I have in my data and if the weight is above my value,

that is basically the threshold that the user set,

then we're going to show the data.

Then finally, we're going to show the data.

So again we're just going to call

showData but I'm going to call showData with a different data.

We're going to call showData which this filtered data that we

get by filtering the original data.

So one important thing is that you cannot replace the data here.

I cannot say data equal data.filter because I'm going to lose this information.

If the user later want to remove the filter,

the user cannot do that anymore because we're going to have changed the original data.

So we want to keep in this specific case the original data intact.

So that's why we filter but we store

that in a different variable that we're calling filteredData.

Then recall showData with filteredData to show the information on the screen.

So let's see what happens if I come here and say

that I only want to show people that is above 200.

So you see that now,

I got only Jim,

because Jim is the only one that is above 200,

but the other bars are still here. They didn't go away.

Although the scale is updated, the bars didn't.

So what's the problem here?

The reason is if I filter data,

the elements that I was showing before that doesn't satisfy the filter,

they have been removed from the data for the chip to d3 perspective.

So what we have to do is to tell the three, "Okay.

If something is removed from the data,

we also want to remove it from the screen." How we do that?

We just use join.exit to tell everything that has been removed, remove.

This means that d3 is going to remove any element

that is not in the data anymore and then later if I remove the filter,

d3 is going to re-add those using the enter part.

So now we're going to type 200 here and if I leave,

you see that I get only Jim.

Another thing that is interesting when you are changing data and it's really easy to

do is that animations help people to understand what changed.

So if you want your application to animate,

one way to do that is using transitions.

So you'll see that I am already using transition here on this scale.

So if you pay attention,

you're going to see that this scale actually have some animation when things change.

So we're going to also add transitions to the other one and it is as easy as you get.

You can just do.transition and you are done.

Every time this thing happens,

you're going to have some animation moving from the original state to the new state.

You can do that to anyone.

It doesn't really affect much if you do this way to remove and to

insert because you have to define first the original state and then change.

So if you want for example the bars to grow,

you can say, "Okay.

I'm going to add transform here on the top,

so I create the element in the right position and then later when I

call this one I'm just going to grow the element to the new position."

So let's do that. We're going to move transform there and hide there as well.

So the only thing that we're going to show here,

but we're going to say that the position is going to be zero here.

This means that you're going to start from zero zero.

Now if I refresh my page,

my bars are moving here so they are translating.

So you see that now the bars just grow and also if I change anything,

like if I say like John, and say that John is 700,

you're going to see that there is an animation

between the transition when I get the new state.

So, those are different ways that you can

update your data and reflect in your visualization.

So remember if you want to filter or if you

want to show only partially off your visualization,

the easier way is just to create a new version of the data that only

contain the information that you want to

show and then let the system draw out this data for you.

So that's how you are able to add new elements or even things like zooming.

You can simulate a zooming by just reducing the information that you

are showing because then the system is going to

spread to use more of the space that you have.

So remember that if you need to add new elements to enter,

only run to new elements.

You can use merge to then run to both new elements and the updated element.

Remember always to remove things that you don't have any more than

the data using the exit function of the selection.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play