Introduction to D3

Loading...

Del curso dictado por New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

calificaciones

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

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

Introduction to web and d3

In this module we will focus on the basics of web development and d3.js

Introduction to D35:06

D3 Selections3:54

Practice: D3 Selections4:59

Changing Content3:23

Practice: Changing Content5:23

Adding and Removing Elements3:19

Practice: Adding and Removing Elements6:17

Changing Properties2:59

Practice: Changing Properties7:00

Conoce a los instructores

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

In this video, I want to start to talk with you about D3.

D3 is a JavaScript library that was created to help us to build visualization

in the web platform and it's important to distinct two functions of D3.

The first one is the methods that it provides for us to manipulate the data,

to transform the data to a format that is easy to visualize.

The second one is to create the actual visualization,

so using D3 to actually draw on the screen.

The way we import D3 in our page is by adding a tag script,

and then we can use the download the file that we have on the D3 website,

and then just refer this file in the src of our script.

If you want, you can actually use this file also hosted on

a CDN network that in theory should give you a faster load of D3.

In this case, you can just replace the d3.js in your src by the CDN URL,

that's going to contain the library that we're going to use.

When we think about the visualization,

we actually have to think about four steps that we

need in order to get our chart in the screen.

So before that, the first thing that we have to do is to transform our data.

So, we receive data in the same format,

but then this data is not in a good format that we can visualize and we needed to

transform this in order to get a shape of

data that is easier to create our visualization.

After we have this new format of data,

we can actually have to map this data to the visual space.

So, for example, if you have a field that has values in dollars,

you're going to have to convert those values to pixels,

so we can draw in the screen,

and you want the values in pixels to be proportional to your values in dollars.

Then, also, we have the new data in the new visualization space,

I can start to work on the visual space.

Even before drawing, I may have to compute my layout.

By layout, if you have complex visualizations like pie charts

or even treemaps where you have to put things based in where the other ones are,

you need a layout to help you with that.

Then, finally, also, we have this computed in my data,

now, I can actually draw that on the screen.

D3 has methods and functions to help you with each of those steps.

So, even if you prefer a library to draw, for example,

you've been using jQuery or you've been using React,

you can actually use all the other functions of

D3 to support you in all the other three steps.

The way we execute each of those step is by using the APIs.

If we think, for example, transform data,

every API of D3 often is going to start with the d3.something.

Here, for example, we have d3.cross,

that is API to help you to create a cross-multiplication over two collections.

You have d3.max, for example,

that helps you to get the maximum value in a field,

and that's very helpful if you're creating your scales.

After we have this data in the format,

we can actually map into map,

you can use APIs like d3.scaleLinear that maps linearly between

the two values or d3.scaleTime that helps you to work with time values.

Finally, we're going to have the data now in

the visual space with metric is in pixels and so on,

now, we can compute the layout.

So, for example, d3.path is very helpful if you are drawing maps or

if you are drawing line charts because you have

to compute the line that you're going to show.

If you are creating a treemap, for example,

there is a complex visualization and sometimes hierarchical,

you need some library that's going to help you to compute

the positions of each square that you're going to have in your treemap,

and that is d3.treemap.

Finally, we're going to have this computation

done and we're going to start to draw this on the screen.

To do that, we're going to use d3.select,

for example, to select the elements,

and then change them the way we need to,

and then we can use d3.append as well to add new elements to our visualization.

Remember, that those are just some examples of the APIs that we have in D3.

We have many others that we're going to be using throughout this course.

So, keep in mind that D3 is a JavaScript library.

It works in your browser,

but it's also compatible with any other framework that you've been using.

If you want to use React,

Angular or any other framework for complex applications,

you can still use D3 to compute everything.

If you prefer to go Pure D3,

you can use D3 to do the visualization from

the data transformation until everything shows up in the screen.

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.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play