0:00

In this video, I want to show you how you can

transform your data to actually show the information in

the way that you want or show

some information that is derived from your data, for example.

So here, what we have is the people in our data set.

We want to show their BMI,

not just the weight or just the height.

But in the data set, we only have weight and height and we don't have the BMI.

So that's the reason even though I have a function here to write the BMI to this ring,

I get undefined because this data hasn't been computed yet,

and we need something that computes this data.

So here, what we have is a container

again and we have a write function to write to this container.

So anything that we use we want to add there,

we just call this function with some text and it adds a div to this container.

Then we have our csv loading our data,

so we can work with it.

As the data is loaded,

we're going to call a function called

'dataLoaded' that is just one that we have right here.

Right now, this function isn't doing anything,

it's just calling the function showData that's going to

write to the screen the name and the BMI of the client.

But as I said, we don't have the BMI.

So we need a way to compute this BMI in order to

transform this undefined into actually the BMI of the person.

So one way we can do that is once we load the data,

we can pre-compute this BMI.

So the BMI is going to be available anywhere in our application.

How we can do that?

We can use map.

Map is going to, for each element,

do something and transform this element and return the transformed version.

Here, the transformation that we're going to do is add this new field, that is the BMI.

So in order to do that,

we can do clients.map and then again,

I'm going to use a error function.

Under error function, I just need a parameter and d is going to be my data point,

and that's basically my client.

Here, I can basically change d. I can say that d.BMI is equal.

Here, I have a function that computes the BMI,

so I'm just going to call this function.

So getBMI with d that is basically my client.

So also I made it just change,

I can just return d. So remember to return

this case because even though this is modifying the original element,

if you don't return,

map is going to think that the result of the function

is undefined and you're going to lose all the information.

Lastly, map doesn't change really your data.

So what you have to do is to add here to clients again.

So I'm saying that the variable that I have is equal this new result.

I don't have to use let here because I already have clients

here coming as parameter to my function.

So g is going to transform clients,

it is going to parse client to my showData,

and then you see here that we're going to get now

the BMI for each participant that we have in our data set.

Now, any place in my application,

this BMI is going to be available for use without having to re-compute it.

You can do that for all information that is really heavy to compute and you want to

pre-compute so your interface doesn't look slow,

but you also may want to totally transform thins thing from

one format to another and you still can use map.

Another type of transformation that we can do in our system is actually aggregation.

Here, we're going to call it reduce.

So basically, you can use map to transform and now you can use

reduce to aggregate all those elements in just one value.

Here, what we want to do is to show the mean.

We want to show the mean BMI in our data set.

How we can do that? We're going to do this in our showData function.

So here, we are going through each client.

We are writing the client.

After that, we're going to write a line,

a simple thing just to separate the mean,

and then you're going to compute the mean.

How we can compute the mean?

First, I have to sum out the values.

How we can sum them? We can say that the sum is equal to our clients.reduce.

4:27

So, the first time we called map,

now we call call.reduce,

and we're going to again parse a function.

But this function, it can have more parameters but for our case,

we just need two.

So the first is the prev,

that is basically which value I had before

getting to this element in the list because this is going to go element by element,

and I need to know which value I had before in order to decide what's

going to be the new value given this new observation that I just did.

I going to call curr that is basically my current element.

So it's the element that I aim in my list at the moment.

Now, I can do some modification of the values.

So prev is going to be the previous sum.

So if I start with the first element,

it's going to be zero before.

Then for the next one, it's going to be the value of the first.

Then for the next one, it's the first plus the second, and so on.

So, we need to actually tell the system to start with zero.

So at the end, we're going to add here comma, zero.

That's how we're going to start,

and we're going to say that the result here is going to be equal to prev,

that is the value that I had before,

plus the current one BMI.

So this is going to basically add the BMI of each person in my data set.

Finally, once I have the sum,

getting the mean is easy.

I can just do sum divided,

remember that I can use clients.length to get

the size of my data set.

So this is going to give me the mean base,

basically the sum divided by the size of the data set,

and you're going to write this to my screen.

6:24

When you have a function that has curr brackets here,

you have to write return.

Otherwise, the system is going to keep returning undefined for

the same reason that we did return on the map on the top.

Then finally, you're going to get the number,

and finally we get the mean here on the right side.

So, remember that you can use map.

If the final results is going to be the same size,

you still can use map to do some kind of filtering because it can just return undefined.

If it is one element that you don't want to use,

and then you can filter those element out later.

But most of the time,

the result is going to show a list.

While you reduce, most of the time you are trying to produce

one element that may be just one value,

an integer or a string,

or you may want to produce one object that contains some information based on this list.

If you want to transform a list to a list again or just shorter version,

you can use filter, for example,

or map to do this transformation.

But they are always relevant because they help us to

compute the statistics of our data and also to change

the shape such that it's easier for us to deal with

this data later when we are building the actual visualization.