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.
