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.
