Force Examples

[00:00:00]
>> This was kind of like a really like, high level overview, and all of the above steps, and if you want that in much greater detail, I have a blog post that really breaks down what it's doing. And it is an older blog post that is based on a previous implementation of the D3 force layout but most of the concepts remain the same.

[00:00:30]
So I think reading this one and will definitely help you understand how the force layout is currently implemented. And just like a quick see some quick like fun applications of D3 force in my own work and because I really enjoy using it. And so for example, when I scroll through this particular visualization this is a visualization on the musical Hamilton.

[00:00:59]
The dots that are just kind of like jumping around in the background that's done with the force Leo. And that's basically saying like on every scroll just like and have some random forces and let it just run wild. And once I get to this point, they actually kind of come in and snap to these positions.

[00:01:23]
And these positions are actually calculated with D3 force and there is a particular force that is, you can specify that each of these news be trying to be centering on a specific x and y coordinate. So like each of these are like nodes. Each of these nodes are a series of lyrics in the same song, and that's how they're kind of being grouped together.

[00:01:52]
I'm using D3 force to group that together. So I'm using D3 force in two different ways in this particular example. And this one is a more recent project of mine and is a how a pandemic might potentially spread through a community in it takes actual data from a particular zip code.

[00:02:21]
And the way that I used force here is every time and these dots each of these dots represent people and every time they move from their houses to the center, and I'm using D3 force to calculate that position. Back and forth kinda make this like fun, a little bit like not a smooth animation to its end destination, but more of like, it runs into things, it bumps into each other.

[00:02:53]
And actually, it's a very subtle detail, but I slightly changed the force layout code such that and the dots, avoid the other houses that it doesn't belong to when it's trying to get to the center. So, yeah, it's it actually avoids all of the other buildings. So it was also a fun use of force.

[00:03:16]
And the final one I'm gonna share is this one that we did for the Guardian, and in this one is about the homeless relocation program in the US. And like it, The Guardian did a really amazing job on the investigative reporting so if you're interested, please check it out.

[00:03:36]
But the place where I used the D3 force actually I think and not he also used the D3 force layout here and she used like a radial force to position each of these nodes and in these kind of layers and then. I used D3 force for this animation and and first to kinda centre the nodes on each of these kinda groups and then as the animation starts.

[00:04:10]
This animation is also using D3 force to calculate the position as it goes and from one group to the other, and this one can comes back. It is D3 force because of the series of takes where it's doing the calculation. And because in each of those takes the positions get nudged, and so slightly and incrementally it kinda gives this like More natural looking animation effect than if you had just done like an enemy's animation with like a linear ease or something like that.

[00:04:47]
So, whenever you're, you want to visualize something that like looks a little bit more organic. And I think force layout actually lends itself really nicely to that. So, I just wanting to show some applications of it and without the context of it being in a traditional node and link graph.

[00:05:14]
A lot of the examples I gave are taking advantage of these two forces that are positioning around certain focal points and the second force being avoiding collision.