adjustments

master
Matt Huntington 7 years ago
parent 9f58394f52
commit f511a81515

@ -1,11 +1,14 @@
# Force Directed Graphs
This lesson covers how to make a force directed graph which will visualize relationships between various nodes
This lesson covers how to make a force directed graph which will visualize relationships between various nodes. In it we will learn about the following:
- Creating a physics based force that will center nodes
- Creating a physics based force that make the nodes repel each other
- Creating a physics based force that will link the nodes to show their relationship
## Describe a Force Directed Graph
- A force directed graph is a graph that is affected by various forces (e.g. gravity, repulsion, etc)
- It can be extremely useful when setting up graphs of relationships
A force directed graph is a graph that is affected by various forces (e.g. gravity, repulsion, etc). It can be extremely useful when setting up graphs of relationships
## Describe how a to set up a graph of relationships
@ -193,7 +196,7 @@ Now our circles distance themselves from each other a little bit, but this is ju
## Create forces
Create a gravitational force at the center of the screen that pulls all data towards it:
Create a centering force at the center of the screen that pulls all data towards it:
```javascript
d3.forceSimulation()
@ -266,4 +269,4 @@ Finally, our graph looks like this:
## Conclusion
In this chapter we used D3 to create a graph that visualizes relationships between various nodes of data. In the next chapter we'll cover how to create a map from GeoJSON data.
In this chapter we used D3 to create a graph that visualizes relationships between various nodes of data. This can be very useful in situations like graphing a friend network, showing parent/child company relationships, or displaying a company's staff hierarchy. In the next chapter we'll cover how to create a map from GeoJSON data.

@ -206,10 +206,10 @@ var dAttributeFunction = d3.geoPath()
d3.selectAll('path').attr('d', dAttributeFunction);
```
`geoPath()` generates the function that we'll use for the `d` attribute, and `projection(worldProjection)` tells it to use the `worldProjection` var created earlier so that the `path` elements appear as an equirectangular projection like this:
`geoPath()` generates the function that we'll use for the `d` attribute, and `projection(worldProjection)` tells it to use the `worldProjection` var created earlier so that the `path` elements appear as an equirectangular projection like this (This is helpful because we can use different projects to view a round world on a flat screen in different ways):
![](https://i.imgur.com/hX7hOoB.png)
## Conclusion
In this section we've covered how to use D3 to create a projection and render GeoJSON data as a map. Congratulations! You've made it to the end of this book. No go off and create amazing visualizations.
In this section we've covered how to use D3 to create a projection and render GeoJSON data as a map, and we've learned about using different projects to visualize the world. This can be helpful when displaying populations or perhaps average rainfall of various regions. Congratulations! You've made it to the end of this book. Now go off and create amazing visualizations.

@ -151,7 +151,7 @@ colorScale.domain(dataset.map(function(element){
}));
```
## Set up the svg
## Set up the SVG
This is pretty standard:
@ -439,4 +439,4 @@ Now, when we click the orange segment, the donut closes smoothly:
## Conclusion
In this chapter we create a pie chart that animates when you remove sections from it. In the next chapter we will use D3 to create a graph that visualizes relationships between various nodes of data.
In this chapter we created a pie chart that animates when you remove sections from it. We've learned how to generate paths from data so that we get different parts of the pie without having to specify the drawing commands directly in the path elements. In the next chapter we will use D3 to create a graph that visualizes relationships between various nodes of data.

Loading…
Cancel
Save