Adding and Removing Elements

Loading...

Del curso dictado por New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

27 calificaciones

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

27 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

Why D3 provide methods for us to change the internals of nodes,

so for example I want to change the content,

is hard using those API to basically just add a new element to

the list of elements that you already have or

remove elements that you have without removing everything.

So, D3 provides us with other APIs that help us

to add and remove those elements and that's what we want to talk on this video.

So, imagine that I have a list like this.

I have item one to item three and now I want to add a newer item, the item four.

So we can append a new item at the end of this list and in order to do that,

we can use an API that D3 provide us called append.

So selection is the parent,

whatever node I'm going to insert a new element inside

it and then tag is going to be the name of the new element.

So if I want to add a new "li",

tag is going to be "li" and note that this element is going to come empty,

without any content inside.

But then we can use the API that we already know

like.text and.html to change the content inside.

So, for example, imagine that I have my list as I showed before.

So if I want to add a new item,

I can select "ul".

So this is the parent,

it's the element that's going to receive the new item,

then I'm going to do.append "li".

So you're going to create a new element of the type""li"" but it's element is blank.

So now I can do.text to set the content inside this element,

and the result is going to be something like this.

We're going to add a new item at the end and the text inside

this item is going to be the text that I specified in my call.

What about removing?

So, if I want to remove some elements,

I can just select them and then after my selection, I can call.remove.

So here note that we are going to select the elements that we want to

remove and then call call.remove to remove those elements.

So for example, imagine that I do d3.selectAll ("li") in my previous lists.

So basically I'm selecting li's inside the list and then I'll call.remove.

This is going to remove all the elements in the list.

So if I had a list like this,

we're going to end up with an empty list.

If I do just select instead of select all,

we're going to end up with just the first one being removed.

Because remember that select finds only the first reference and not all the references.

But if I use "select all" I'm going to remove all of

them but I could use also a class to remove only

those that had specific class or an ID

to remove only the element that contains any specific ID.

So remember, we can use append to add information to

our page in a way that is not destructive of what we had

before especially if we have a list and we want to add

more elements to this list and we can use remove

to remove elements that we don't want to be present on

the screen anymore and as always we use selection to select.

For append, you have to select the parent element,

the element that's going to receive the new value and for remove,

you have to select the elements that you want to remove.

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