Filtering and Sorting

Loading...

Del curso dictado por New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 calificaciones

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 calificaciones

Curso 3 de 4 en SpecializationInformation Visualization

In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.

De la lección

Dealing & drawing with data

In this week we will learn how can we load and manipulate data using d3.js

Loading Data3:34

Practice: Loading Data5:38

Filtering and Sorting4:14

Practice: Filtering and Sorting7:00

Transforming Data4:41

Practice: Transforming Data7:47

Computing Simple Statistics4:30

Practice: Computing Simple Statistics4:31

Conoce a los instructores

Enrico Bertini
Associate Professor
Computer Science and Engineering
Cristian Felix
PhD. Candidate
Computer Science and Engineering

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.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play