Course info
Aug 29, 2016
2h 33m

Have you ever wondered how to make highly interactive network graphs? This course, Force Layout Graphs in D3, covers everything you need to learn how to build and modify force layout graphs. Specifically, you'll go over constructing force layouts, applying distance and strength to nodes, using gravity and charge to affect the layout, and styling elements to finish off the visualization. The final project is a fun one which explores the majority of options for force layouts in D3. After completing the course, you'll be ready to make your own highly interactive force layout graphs that are unique and interesting.

About the author
About the author

I work as a feedback mechanism for organizations and teams to help them understand what’s going on with their products and processes. I do this by collecting and organizing their data, visually exploring it, enriching it with other data and metrics, then presenting my findings using creative information design techniques. This leads to improved business performance and often sparks a data-driven culture throughout my clients organizations.

More from the author
What's New in Tableau 10
1h 50m
Aug 30, 2016
D3: The Big Picture
1h 26m
Aug 16, 2016
More courses by Ben Sullins
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. This is Ben from bensullins. com, and welcome to my course, Force Layout Graphs in D3. I've been a data geek for nearly 20 years now, learning all of the techniques and skills necessary to make meaningful data visualizations. In this course, I'm excited to share with you one of the most interesting and engaging ways of visualizing data, force layouts. Network diagrams, tree layouts, and cluster analysis are all great use cases for a force layout in D3. In this course, we're going to learn how to construct a force layout in D3, how to add links and adjust their distance in gravity, how to style links and nodes, and how to use images for nodes. By the end of this course you'll know everything you need to build force layout graphs in D3, as well as build a fun example using data from the book series of A Game of Thrones. Before beginning this course, you should be familiar with D3 fundamentals, JavaScript, HTML, and CSS. I hope you'll join me on this fun journey to learn how to build force layout graphs in D3 with this course at Pluralsight.

What Are Force Layout Graphs?
Hi. This is Ben with bensullins. com, and welcome to this module, What Are Force Layout Graphs? We're going to take a look at a definition of the force layout. We'll look at some examples, we'll talk about graph theory, which is kind of the nature behind force layouts, and then I'll give you a quick tour of the API in D3.

Constructing a Force Layout Graph
Hi. This is Ben with bensullins. com, and welcome to this module, Constructing a Force Layout Graph. First, I'm going to talk about the data structure you need to set up for the nodes just so we're clear on the best way to set that up before you start getting to building them. Then we'll actually go through and build a very simple example, so actually get coding here in our Cloud9 IDE environment, and in the end of this module you'll have an actual force layout. Let's get going.

Adding Links Between Nodes
Hi. This is Ben with bensullins. com, and welcome to this module, Adding Links Between Nodes. First, we're going to take a look at the link data structure and how we need to set that up in order to actually draw the links. Then I'll go through and take a previous example we'd worked on and draw the links between the nodes. Then we'll go into how to actually add curved links instead of just straight lines. And lastly, we'll finish it off by adding arrows to the links. Let's get going.

Applying Distance and Strength
Hi. This is Ben with bensullins. com, and welcome to this module, Applying Distance and Strength. First, we're going to take a look at applying distance to links, then working with unequal distance, which is quite common when you have a real dataset, and then we'll go through applying strength to links and how that actually affects the distance. Let's get going.

Working with Gravity and Charge
Hi. This is Ben with bensullins. com, and welcome to this module, Working with Gravity and Charge. We're going to go through two simple steps here. First, we'll look at working with gravity. Then we'll go into working with charge.

Applying Styles
Hi. This is Ben with bensullins. com, and welcome to this module, Applying Styles. We've got a lot to cover here, and we're going to start by pulling in external data. We have our Game of Thrones Battles, and we have a CSV file that we're going to use to actually pull that data in to our force layout graph. Then, instead of using SVG shapes, we're going to use images for our nodes. We'll style the links between the nodes, which represent each battle between each house in the Game of Thrones book series, and then we'll add labels to each node so we know which house is which. And lastly, we'll add a hovercard so when you hover over a link you'll get this big, nice pop-up with all the details about the battle. It's important to remember that there's a story here. This isn't just some fun, wild example. There is a real world application, and that is with Cogsley Services Inc. who was founded in 2008. And they're a visual effects firm, so they make things for the movie industry, and in this case, what they want to do is publish interactive graphics on pop culture series to build their audience, so the idea being that this is kind of a fun example. I thought it'd be a nice, interesting way to teach this, but there are some real world applications here, right? Other cases you might look at a network diagram or user locations, all kinds of different things here, but I thought this would be a fun one, and I found some really fun, interesting data out there, so let's going here and start building our final project.