One important thing before visualizing is to actually treat your data or [inaudible] with our data.
So sometimes you don't really want to visualize everything.
So you want for example, to filter your data to show only a superset of
it or you may want to sort so its easier to the user to find a record,
or a dot, or whatever mark you are using that they are looking for.
So in order to do that,
actually you have to remember that the result
that you get when you load your data is often an array.
That's not always the case,
but most of the time you have an array and then each element inside
your array is going to represent one of the roles that you have in your CSV for example.
Then, inside this row,
we have what we call an object,
a JavaScript object, where you have keys,
like here I have named for John Doe,
and then I have age for how old he is,
and each row is going to have an object similar searches
and we can access this properties from inside this object.
So what we want for example, is to filter.
Imagine that I don't want some specific registers to show up in my screen yet,
I may want to add them later so I'd have to filter my data.
Turns out that JavaScript already offers you some methods to filter.
So you don't really need D3 to filter your data,
you can use the methods that JavaScript provides you and in this case,
the name of the method is filter.
So you basically call the method "filter" and you pass a function as parameter.
This function is responsible to return true,
if you want to keep the record or false,
if you want to remove it from your list.
So for example here,
I am calling my function filter in my data and what I'm
doing is that I'm returning if the client.age,
that is the age of my client is less than 25.
So this means that I'm only going to keep
clients in my data that has an age smaller than 25.
It's important to remember that filter is going to return you a new array.
So this means that the original data is still there,
and you get a copy of your data that now you can play and visualize.
So if you need to change our filter,
you just can filter again the original data.
It doesn't destroy your data.
Different of that is sorting.
So sorting I basically want to order my roles in a certain order.
What happens is that for example,
imagine that I want to order by age,
sorting is going to change my list.
So I'm going to have the same list,
but now it's going to be in a different order.
While filter, you get a copy of the list.
So if I want to sort,
I basically have to call the function "sort" again it's
a JavaScript method not a D3 method and you pass a function that is a comparator.
A comparator basically received two values and here I am calling them a and b,
and the goal of the function is return minus one if a is less than b,
zero if they are equal,
and one if a is greater than b.
However, what happens is that d3 provide us some helpers that we can use.
So we don't have to write this comparators all the time.
So for example, d3 ascending industry and d3 descending are comparators are in
built that we can use to order lists either ascending or descending order.
So for example, imagine that I'm calling my function
"sort" I can also insert my function my comporator.
Run something more complex with this function and pass different parameters to them.
So let's see how this work.
Imagine that I have again my list with
my clients and now I want to sort my clients by age.
So I'm going to create, I'm going to call sort,
I'm going to pass a function and inside this function,
I'm going to again call the ascending from
d3 and then I'm going to pass only the age of the client.
So the order that I going to get is an array where
the elements inside are ordered by their age.
So sorting and filtering are
very important mechanism in order to facilitate showing data to your users.
You not always have to visualize everything that you have,
sometimes you need interaction and you want the user
to switch between different subsets of your data.
So you need filtering in order to select only the elements that you want to visualize and
sorting in order to visualize them in an order that is easier to the user to deal with.