Transforming Data

Loading...

En provenance du cours de New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

notes

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

notes

Cours 3 sur 4 dans Specialization Information 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.

À partir de la leçon

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

Rencontrer les enseignants

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

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.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play