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.
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.
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.