You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.7 KiB
1.7 KiB
Force Directed Graphs
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
Describe how a to set up a graph of relationships
Display
- We're going to have a list of nodes representing people and display them as circles
- We're going to have a list of links representing connections between people and display them as lines
Physics
- We're going to have a gravitational force at the center of the
svgthat draws all nodes towards it - We're going to have forces on each node so that they repel each other
- We're going to have link forces that connect each of the nodes so that they don't repel each other too much
Set up the HTML
Pretty standard, but we'll need two <g> elements:
- One to contain the nodes (people - circles)
- One to contain the links (relationships - lines)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg>
<g id="nodes"></g>
<g id="links"></g>
</svg>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
Set up styling for nodes and links
Create a css file for our circles (nodes/people) and lines (links/relationships)
circle {
fill: red;
r: 5;
}
line {
stroke: grey;
stroke-width: 1;
}
Don't forget to link to it!
<link rel="stylesheet" href="app.css">
Set up svg
Standard:
var WIDTH = 300;
var HEIGHT = 200;
d3.select("svg")
.attr("width", WIDTH)
.attr("height", HEIGHT);