From 8d5aaf203e065243fc07bd76a87e61f6d45c150e Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Wed, 29 Aug 2018 02:19:11 -0400
Subject: [PATCH] commenting force directed graph code

---
 examples/force_directed_graph/app.js | 36 +++++++++++++++-------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/examples/force_directed_graph/app.js b/examples/force_directed_graph/app.js
index f9c6522..a94e72a 100644
--- a/examples/force_directed_graph/app.js
+++ b/examples/force_directed_graph/app.js
@@ -1,10 +1,12 @@
 var WIDTH = 300;
 var HEIGHT = 200;
 
+//set height/width of the svg
 d3.select("svg")
     .attr("width", WIDTH)
     .attr("height", HEIGHT);
 
+//data for each person
 var nodesData =  [
     {"name": "Charlie", "age": 12},
     {"name": "Mac", "age": 32},
@@ -14,6 +16,7 @@ var nodesData =  [
     {"name": "Cricket", "age": 95}
 ];
 
+//data showing relationships between people
 var linksData = [
     {"source": "Charlie", "target": "Mac"},
     {"source": "Dennis", "target": "Mac"},
@@ -23,32 +26,33 @@ var linksData = [
     {"source": "Cricket", "target": "Dee"}
 ];
 
-var nodes = d3.select("#nodes")
-    .selectAll("circle")
-    .data(nodesData)
-    .enter()
-    .append("circle");
+var nodes = d3.select("#nodes") //select the #nodes <g>
+    .selectAll("circle") //select all circles within it (even if none exist)
+    .data(nodesData) //attach data to this selection
+    .enter() //find all data elements not matched to circles
+    .append("circle"); //append a circle for each unmatched data element
 
+//repeat what you do for nodes, but with lines, the #links <g>, and the linksData array
 var links = d3.select("#links")
     .selectAll("line")
     .data(linksData)
     .enter()
     .append("line");
 
-d3.forceSimulation()
-    .nodes(nodesData) // add this line
-
-d3.forceSimulation()
-    .nodes(nodesData)
-    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) // add this line
-    .force("charge_force", d3.forceManyBody()) //add this line
-    .force("links", d3.forceLink(linksData).id(function(datum){ //add this
-        return datum.name //add this
-    }).distance(160)) //add this
-    .on("tick", function(){
+d3.forceSimulation() //create a force simulation
+    .nodes(nodesData) //set the nodes for the simulation, based on the nodesData array
+    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) //create a centering force in the middle of the svg
+    .force("charge_force", d3.forceManyBody()) //create a charge force, so the nodes repel each other
+    .force("links", d3.forceLink(linksData).id(function(datum){ //create a links so the nodes aren't repelled too far from nodes they're linked to in the linkData array
+        return datum.name //create the links by associating each link's source/target with a name property from the nodesData array
+    }).distance(160)) //set the distance of the link
+    .on("tick", function(){ //create a function that will be called with each "tick" of the simulation
+        //with each tick...
+        //update the circle cx/cy values based on the x/y values d3 added to the nodes data
         nodes.attr("cx", function(datum) { return datum.x; })
             .attr("cy", function(datum) { return datum.y; });
 
+        //update the line x1/y1/x2/y2 values based on the source/target x/y values d3 added to the links data
         links.attr("x1", function(datum) { return datum.source.x; })
             .attr("y1", function(datum) { return datum.source.y; })
             .attr("x2", function(datum) { return datum.target.x; })