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.
Practice: Visualizing Networks Part 1
Loading...
From the course by New York University Tandon School of Engineering
Information Visualization: Programming with D3.js
14 ratings
New York University Tandon School of Engineering
14 ratings
Course 3 of 4 in the Specialization Information Visualization
From the lesson
Layouts and interaction
Meet the Instructors
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
In this video, I want to show you how you can use the three to display networks.
And more especially, I want to show you how we can create another link diagram.
But in order to understand how draw a network is important for
us to understand how the data looks like.
So here, for example, we have a small data set.
And this data set is break into two sections, nodes and links.
So if you think about nodes,
nodes are basically some circles that we're going to draw for each person.
And here we have their names, so we have John, Marcus, Jane.
So this could be John, this could be Marcus, Jane, and
we could have others here.
And then we the links.
So, the links are going to be the connection between them.
So, if we are saying that we have a link with a source John and
the target Marcus, it means that if this is John and this is Marcos.
We're going to have a line that goes from John to Marcos.
Know that even though in my visualization, I don't have any direction.
In my data, I going to have this direction.
So, I'm saying that I going to start from John and go to Marcus, and
it's up to me to decide if I want to draw just a line, or
if I want to show this direction with an arrow.
So, the problem here is how do we decide where to put each circle in outer space.
So if you want to show a 100 people,
how are we going to decide where to put each one?
If I just put those people in order, I may have a lot of overlapping lines.
For example, I could have distinct here, where one line is crossing the other one.
So in order to fix this problem, we use a technique called Force Direct Layout.
So a layout in d3 is going to compute information for you, basically position
of elements and shapes of elements so you can use this information later.
We have seen this thing happen with arcs for example where d3 computes for
us the angles of the arcs.
But here we want d3 to complete the positions, and
based on the links that we have between these people.
And d3 is going to do that by trying to simulate some force that either push away,
pull away nodes that are very dissimilar, that doesn't have much link.
But I'll put together nodes that are more similar so
we can avoid this kind of crossing that we have here.
So, let's see how d3 help us to do this.
So here in our data, I just saw we have our nodes and we have our links.
The first step that we need to go through is to view those simulation force.
Where d3's going to try to arrange the nodes for
us based on just sort of gravitational force between the nodes.
So to do that, we're going to create something here called simulation.
And you going to create a d3.forceSimulation.
So, this is the first thing that we have to build.
Just build the simulator that is going to simulate the force, but
now we have to choose which forces we want to use.
So as I said, one force that we are interested on is to pull apart
things that does not have link, and a put together things that are related.
So, we're going to create a force called link and
we're going to use features from d3 called force link.
That's going to use the link of Adobe But now we need something that returns the id.
So given the node, we need something that tells me what is the id off that node.
So, you're going to use either function that's called id,
that's going to return d.id.
So this function basically takes a note as input, and returns the id of the note.
So this is the first force that we have, but
that's not enough because a force like this may put together things.
But they may not be very well spaced or well centralized in my screen,
this kind of thing.
So you may want to add new forces.
So a second force that we can add is charge.
And this force simulates kind of elements pulling each other apart.
So, we can do d3.forceManyBody.
And then finally, I want to make sure that the resulting is more
towards the center of my visualization.
So, I'm going to use a force to put my elements in the center.
So remember that bodyWidth is my width, so
we just divided by 2 to get the center, and then we have bodyHeight.
There is the height and we also divide that by 2.
So now, I created all the forces that I want.
My next step is to run those forces,
and tell this simulator where the nodes come from and where the links come from.
So remember that our data set we have two keys, nodes and links.
So we going to use that here, were going to say,
simulation.nodes(data.nodes).
And you're going to also see that our links,
So, link is the name of the font the source that we created on the top,
and we going to say, that the links are data.links.
Also I have my simulation, I can run it and get each steps.
So, this is a retaliate process.
So it going to run give me a result, it's going to run again and
give me a new result, and so on.
So, I can capture that using a an event here called tick.
So this means that every time I have a new update, I going to run this function.
So on tick, this means that every time I have a new information,
I just going to log my data here.
So this simulation thing, it updates the data every time it runs.
So this means that every time I go to this process,
it going to change the elements that I have in my data, adding new information.
So if I open all these notes here, for example, you going to see that for
now, for each node, I also have their position, their x and y position.
This is the velocity, how they are moving in some direction.
Now, I can just use use the x and y position to draw the dots on the screen,
and the same thing is going to happen with my links.
So if I open a link, I'm going to have information of the source, for example,
where it starts.
And I also have an x and y position where my line starts, and
the target where my line is going to end.
Now, I can use this information to actually draw my node link on the screen.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
