It's important that some of your data doesn't come in the format that you want.
So, in this video, we want to talk about how we can transform our data so that
data can be in the shape or the format that we need for our visualization.
Basically, what one of the method should do that,
is if you take the list of your data,
where each element corresponds to one of the elements that you want to visualize,
you want to transform this element in a different formats, so you can visualize them.
So, for example, you may have a complex object in
the original version and you just want one of the values of this object.
So, in order to do that,
you use what we call map.
So, basically, once you map some object from the original format to a new format.
Again, JavaScript is going to provide you with some methods that you can use.
So, you don't really have to rely on the three here,
but it's important that the three can interoperate with those functions.
So, the function that we use to transform is.map, and inside it,
you are going to pass a function that's going to receive each element,
and then it's going to return the new version of the element.
So, for example, here,
I am calling map in my array,
and I am returning my client.age.
So, my original array actually had a list of
different clients with all the information like
name and any other information that I have.
Now, I am transforming this original list in only a list of numbers where
each number is the age of the client in the same order that I had before.
This make easier for me to visualize for example, just the age,
if I want to provide that to a method that knows how to draw numbers,
the method doesn't have to worry about all the rest
of information that I have for each client.
Another method is to use reduce.
So, different from map that maps one element to one element in the reduce list,
reduce is going to map all the elements to just one value.
That is for example what we do when we sum.
So, we're basically mapping all the values that we have in my array
to just one element that is the sum of all the numbers.
So, let's see how it looks like.
So, in order to use reduce,
you have to first provide a reducer,
that is a function, that is going to be called for each element.
Then you may also provide the initial value.
It's not required.
If you don't provide an initial value,
JavaScript is going to use the first element of your list as your first initial value.
A reducer is a function that can have many parameters.
So, the first parameter that you have is what we call accumulator.
So, basically, this is the object that is carried between each call to the reducer.
So, when you start your list,
just start with some value and you keep
updating this value every time you run your reducer.
The current value, is actually the element that we're looking at the moment.
Finally, we have the index,
that is the position of the element on the array,
and they're arrayed self in case you need to look in some information of it.
Then as I said,
you return the new value that you want to use that is basically
the new accumulator that's going to be passed to the next function.
So, let's see how it looks.
Imagine that I have a list,
where I have only numbers,
1 to 4, and now I want to reduce that.
So, if I call reduce with this list,
and here I'm passing three as my initial value.
So, every time I run,
I'm going to sum them.
So, basically I'm going to take whatever value I have in my accumulator,
and I'm going to add my current value to this value.
So, for example, in the first run,
I'm going to receive as accumulator,
3, because this is my initial value.
I'm going to receive as current value,
1, because this is the first element of my list.
I'm going to return 4 because this is the sum of 1 plus 3.
In the next run,
I'm basically going to receive the 4 from the first one as my accumulator.
Now, my value is 2 because the second element of my array.
I'm going to sum them, and it's going to become 6,
and that's going to be my accumulator for the next run until I get to the end.
The result of the last reducer is the result of your function.
So, map and reduce is actually
a very standard framework that people also use in big data because it's very powerful.
It's basically you transform your data,
and then you can do some aggregation with your data transforming it in some new object.
So, those are really relevant for us when we are dealing with data,
because we are offering summarizing things or changing
things in order so they can fit our visualization.
A JavaScript provides this functions for us,
and sometimes the three can help in this process in the transformation
with the functions that they provide in order to transform your data.
Enrico BertiniAssociate Professor
Cristian FelixPhD. Candidate
