All examples By author By category About

emeeks

Full window Github gist

An online tool for interactive teaching of network visualization and representation principles.

The range sliders at the top change the values for the force-directed algorithm and the buttons load new graphs and apply various techniques. This will hopefully serve as a tool for teaching network analysis and visualization principles during my Gephi courses and general Networks in the Humanities presentations.

Notice this includes a pretty straightforward way to load CSV node and edge lists as exported from Gephi.

It also includes a pathfinding algorithm built for the standard data structure of force-directed networks in D3. This requires the addition of .id attributes for the nodes, however.

Now with Clustering Coefficients!

Also, it loads images for nodes but the images are not in the gist. The code also refers to different network types but the data files on Gist only refer to the transportation network.

Label sizes are based on the size of the circle element of a g, non-working hierarchical code included for no extra charge

###Original Instructions###

Click to add nodes! Nodes near the cursor will be linked to the new node.

<!DOCTYPE html>
<meta charset="utf-8">
  <title>An Interactive Introduction to Network Analysis and Representation</title>
<style>

html, body {
  height: 100%;
  width: 100%;
  color: #444;
  font: 1em/1 "Hoefler Text", "Georgia", Georgia, serif, sans-serif;
  padding: 10px;

}

ol {
  list-style-type: none;
}

h1 a:visited {
    text-decoration:none;
    color:#404040;
    font-weight:600;
    }

h1 {font-weight:400;font-size:1.6em;line-height:0.9em;padding:0px 0 0;margin: 1em 0em .25em 0em;}
h1 a{font-weight:100;letter-spacing:-0.05em;position:relative;}

h2 {font-weight:50;font-size:1.2em;letter-spacing:-0.05em;position:relative; color:#888;margin: 0;}
h2 a {
    text-decoration:none;
    color:#404040;
    font-weight:600;
    }

h2 a:hover {
    color:#C71585;
    font-weight:600;
}

rect {
  fill: none;
  pointer-events: all;
}

.node {
  fill: #000;
}

.cursor {
  fill: none;
  stroke: brown;
  pointer-events: none;
}

.link {
  stroke: #999;
}

#viz {
  height: 100%;
  width: 50%;
  float: left;
}

#lesson {
  height: 100%;
  width: 45%;
  float: left;
}

#definitionbox {
  margin-top: 20px;
  margin-right: 100px;
  font-style: italic;
  font-size: 1.1em;
  color:#707070;
  height: 0;
  overflow: visible;
}

#citations {
  margin-top: 20px;
}

#codetext {
    font: 1em/1 "Courier New", Courier, monospace;
}

#footer {
  margin: 20px;
  height: 20px;
  width: 1000px;
}

</style>
<script src="https://d3js.org/d3.v3.min.js"></script>

<body>
  <a href="https://gist.github.com/emeeks/4588962"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div id="viz">
  <form>
    Gravity <input id="gravitySlider" type="range" onchange="updateForce(); changeGravity()" min ="0" max="1" step =".01"  value=".1" />
    <input type="text" id="gravityInput" value=".1" />
</form>
  <form>
    Attraction (Links) <input id="attractionSlider" type="range" onchange="updateForce(); highlightEdges()" min ="-100" max="100" step ="1"  value="50"/>
    <input type="text" id="attractionInput" value="50" /><input type="checkbox" id="edgeCheckbox" onclick="updateForce(); highlightEdges()" /> Weight
</form>
  <form>
    Charge (Nodes) <input id="repulsionSlider" type="range" onchange="updateForce(); highlightNodes()" min ="-200" max="0" step ="1"  value="-60" /> 
  <input type="text" id="repulsionInput" value="-60" />
  <input type="checkbox" id="nodeCheckbox" onclick="updateForce(); highlightNodes()" /> Size
</form>
    <form>
    Size by
    <input id="degreeCheck" type="radio" name="resizeGroup" checked="true" onclick="resize('nothing')"> Nothing
    <input id="degreeCheck" type="radio" name="resizeGroup" onclick="resize('degree')"> Degree
    <input id="labelSlider" style="width: 50px" type="range" onchange="labelChange();" min ="0" max="20" step =".1"  value="0"/> Labels
</form>
    <form><input type="checkbox" id="directedCheck" onclick="changeDirectedness()"> Directed</form>
<form><input type="button" value="Delete some edges" disabled=true> <input type="button" value="Delete some nodes" onclick="deleteRandomNodes()">
<input type="button" id="addNodesButton" value="Add nodes" onclick="addNodes()"></form>
  <div id="definitionbox" height="1px">
  </div>
</div>
<div id="lesson">
  <div id="lessontitle">
  <h1>Introduction to Network Analysis and Representation</h1>
  <h2><a href="https://dhs.stanford.edu">Elijah Meeks</a> and Maya Krishnan</h2>
  </div>
  <div>
    <ol>
      <li><input type="button" value="Introduction" onclick='updateText("introduction")'></li>
      <li>Models</li>
    <li><input type="button" value="Random" onclick='randomGraph(50,.025); updateText("randomgraph")'><input type="button" value="Dramatic" onclick='loadGraph("hamlet_nodes.csv","hamlet_edges.csv","person"); updateText("drama")'><input type="button" value="Transportation" onclick='loadGraph("rome_nodes.csv","rome_edges.csv","city"); updateText("transport")'></li>
    <li><input type="button" value="Correspondence" disabled=true><input type="button" value="Genealogy" onclick='loadGraph("darwin_nodes.csv","darwin_edges.csv","person"); updateText("darwin")'><input type="button" value="Administration" onclick='loadGraph("dgsd_nodes.csv","dgsd_edges.csv","city"); updateText("dgsd")'></li>
      <li>Layouts</li>
    <li><input type="button" value="Force-Directed" onclick='updateForce(); updateText("forcealgo")'><input type="button" value="Plot" onclick='plotLayout(); updateText("plotlayout")'><input type="button" value="Hierarchical" disabled=true></li>
      <li>Metrics</li>
    <li><input type="button" value="Centrality" onclick='calculateCentrality(); updateText("centrality")' /><input type="button" value="Clustering Coefficient" onclick='clusteringCoefficient(); updateText("clustering")' /></li>
    <li><input type="button" value="Community Detection" disabled=true></li>
  <li>Exploration</li>
    <li><input type="button" value="Pathfinding" onclick='selectPath(); updateText("pathfinding")'><input type="button" value="Ego Network" onclick='showEgoNetwork(); updateText("egonetwork")'><input type="button" value="Spatial Problem" onclick='spatialProblem(); updateText("spatialproblem")' ></li>
  </ol>
    </div>
    <div id="lessontext">
  </div>
  <div id="citations">
  </div>
  <div id="codetext">
  </div>
</div>
<div id="footer"></div>
</body>

var width = 500,
    height = 600;

var fill = d3.scale.category20();

//Set the initial state
randomGraph(50,.025);
updateText("introduction");

function updateText(lessonType) {
  switch(lessonType)
  {        
  case "introduction":
  d3.select("#codetext").html("<h3>Code</h3><p><a href='https://gist.github.com/emeeks/4588962'>You can see the code on Github here</a></p><p>This section is used to display relevant code for the actions that you've clicked on. All implementations of network functionality on this site are built in D3 using JavaScript, so they're not particularly high performance. Plus, they were coded by a humanist, and you know how that goes.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>1. BRUGHMANS, T. 2012. Thinking through networks: a review of formal network methods in archaeology. Journal of Archaeological Method and Theory.</li></ol>");
  d3.select("#lessontext").html("<h2>Introduction</h2><p>Networks and network analysis has grown more prominent in both humanities scholarship and public discourse. In this context, networks--also known as graphs or node-link diagrams--are \"a set of vertices (also called points or nodes) which represent the entities of research interest, and a set of lines (or ties) between these vertices which represent their relationships.\" [1]</p><p>This interactive application is designed to provide an overview of various network analysis principles used for analysis and representation. It also provides a few examples of untraditional networks used in digital humanities scholarship. Finally, along with the various methods described interactively here are links to related scholarship.</p><p>Each network type is listed in the Models section, and can be paired with an analysis or representation method by simply clicking on a network type to load a new network, and then clicking on an analysis or visualization method.</p><p>Networks are represented using traditional force-directed techniques or by plotting along the xy axis based on numerical attributes of the nodes (longitude and latitude in the case of nodes that represent geographic entities). For the force directed layout, you can adjust the various force principles to see how this affects the representation of the network you're working with.</p><p>This implementation will likely remain a work-in-progress for some time, and if you notice any flaws or discrepencies, or have a suggestion, please contact <a href='mailto:emeeks@stanford.edu'>Elijah Meeks</a>.</p>");
  break;
  case "transport":
  d3.select("#codetext").html("<h3>Code</h3><p>Loading a Transportation Network uses the same code to load all preset networks, so maybe this should focus on the CSV being loaded</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li><a href='https://journalofdigitalhumanities.org/1-3/modeling-networks-and-scholarship-with-orbis-by-elijah-meeks-and-karl-grossner/'>Meeks, E. & Grossner, G. \"Modeling Networks and Scholarship with ORBIS\" Journal of Digital Humanities 1.3 Summer 2012.</a></li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Transportation Networks</h2><p>This is a piece of the transportation network of the Roman World from <a href='https://orbis.stanford.edu'>ORBIS</a>. A transportation network typically uses edges to describe an annotated connection between two sites, though sometimes nodes do not represent sites in the traditional sense but rather any place where a switch can be made from one route to another, such as an intersection, on-ramp, or crossroads.</p><p>If plotted, the nodes are laid out by their geographic location</p><p><a href='https://thenounproject.com/noun/city/#icon-No1566'>City icon by Thibault Geffroy, from The Noun Project</a></p>");
  break;
  case "randomgraph":
  d3.select("#codetext").html("<h3>Code</h3><p>Some code that produces a random graph, with random links and random spatial characteristics.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>Albert, R., and Barabasi, A-L. (2002). Statistical mechanics of complex networks. Reviews of modern physics 74 (January): 47-97.</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Random Graph</h2><p>Random graphs are used as control sets to compare variation with the studied network. Random isn't the best word for these networks, as they can be generated by very specific and complicated rules, so as better to model the phenomena being studied.</p><p>If plotted, each node will be placed according to random xy values generated when the network is first created.</p><p>This graph is created with 50 nodes and a 2.5% for each node to be connected to each node (in both directions, so a 5% chance total if treated as an undirected graph). You can create a new random graph with different settings:</p><form>Nodes: <input type=\"text\" name=\"nrgNodeValue\" value=\"50\" /> Link Chance <input type=\"text\" name=\"nrgLinksValue\" value=\".025\" /><input type=\"button\" value=\"New Graph\" onclick='randomGraph(this.form.nrgNodeValue.value,this.form.nrgLinksValue.value);'></form>");
  break;
  case "drama":
  d3.select("#codetext").html("<h3>Code</h3><p>Loading a Dramatic Network uses the same code to load all preset networks, so maybe this should focus on the CSV being loaded.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>Moretti, Franco. 'Network Theory, Plot Analysis', New Left Review 68 (March-April 2011)</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Dramatic Network</h2><p>This network represents speech-intereactions in one of Shakespeare's most famous plays, Hamlet. An edge from one character to another indicates the former has spoken to the latter; the weight of the edge indicates the number of words spoken. This network was first constructed by hand by Franco Moretti in 'Network Theory, Plot Analysis', published in New Left Review 68 (March-April 2011). Since then, researchers in the Literary Lab have constructed networks from each of Shakespeare's plays, as well as the plays of Aeschylus, Euripides, Sophocles, Aristophanes, Seneca, Racine, Corneille, and Ibsen. For more information, see the Literary Lab's second pamphlet on this work, available <a href='https://litlab.stanford.edu/?page_id=255'>here</a>.</p><p>If plotted, the network is laid out according to number of speech events (y-axis) by amount of words spoken (x-axis).");
  break;
  case "darwin":
  d3.select("#codetext").html("<h3>Code</h3><p>Loading a Genaological Network uses the same code to load all preset networks, so maybe this should focus on the CSV being loaded.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Genealogical Network</h2><p>This network consists of individuals with the last name Darwin, from a genealogical network of British cultural elites. The network does not include any children or spouses with different surnames.</p><p>If plotted, nodes are laid out by birthdate (x-axis) and lifespan (y-axis)");
  break;
  case "dgsd":
  d3.select("#codetext").html("<h3>Code</h3>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Political Administrative Network</h2><p>The Digital Gazetteer of the Song Dynasty describes the manner in which administrative units were organized during the Song Dynasty. Here we can see counties, prefectures, and towns in Fujian Circuit.</p><p>In a sense, this is an n-partite graph, meaning that the network consists of nodes of different types (n indicating the number of different types), since it represents distinct administrative entities the sets of which (counties, prefectures, towns, circuits) do not directly connect within each set. e.g. A county does not connect to a county but rather connects to a prefecture or town, which likewise do not ever connect to members of the same class but rather administrative units above or below them.</p><p>Networks that represent different classes or categories of nodes are more difficult to measure and represent than networks that represent single categories of nodes. Of course, if one's object of study is a broader category, such as 'administrative units' then it avoids this issue.</p><p>If plotted, the network is laid out geographically, with unknown locations inheriting the point location of their parent unit (except for the circuit itself, which is laid at the geographic center of the known points.</p><p><a href='https://thenounproject.com/noun/city/#icon-No1566'>City icon by Thibault Geffroy, from The Noun Project</a></p>");
  break;
  case "pathfinding":
  d3.select("#codetext").html("<h3>Code</h3><p>This one is going to give you fits, because the same code is used for individual paths and aggregated statistics.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Network Pathfinding</h2><p>Finding the shortest path between two nodes in a network provides the basis for several network statistics measures such as Betweenness, Network Diameter, and Closeness.</p> <p>Network pathfinding is accomplished using various pathfinding algorithms, the most common being Dijkstra's algorithm, which is suitable for small networks like this but not for the large networks typically analyzed with packages such as Gephi. For large networks, heuristics need to be employed to improve the efficiency of an algorithm. One such pathfinding algorithm that employs heuristics is <a href='https://en.wikipedia.org/wiki/A*_search_algorithm'>A*</a>.</p><p>Notice that the path between nodes in a network can change or cease to exist if the network is directed instead of undirected.</p>");
  break;
  case "centrality":
  d3.select("#codetext").html("<h3>Code</h3><p>Part of this code is from Pathfinding.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>1. <a href='https://faculty.ucr.edu/~hanneman/nettext/C10_Centrality.html'>Hanneman, R. & Riddle, M. Introduction to Social Network Methods - Chapter 10. Centrality</a></li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Centrality</h2><p>Centrality is a general term indicating a measure of a node's location in a network relative to other nodes in the network.</p><p>One measure, shown first, is the average Least Cost Path to all the nodes in the network. This <input type='button' onclick='sizeByStats(\"Average Path Length\")' value='Average Path Length' /> is similar to (these should be buttons) Closeness or Farness centrality.</p><p>Another measure is <input type='button' onclick='sizeByStats(\"Betweenness\")' value='Betweenness Centrality' /> which tallies the number of times a node is crossed for every least cost path in the network.</p><p>There are many more centrality measures some of which are described in [1].</p>");
  break;
  case "clustering":
  d3.select("#codetext").html("<h3>Code</h3><p>This code only does undirected</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Clustering</h2><p>The clustering coefficient of a node is determined by comparing the number of connections between connected nodes to the number of possible connections between connected nodes. A clustering coefficient of 1 indicates a clique, which is a set of nodes that are all connected to each other. The local clustering coefficient is the value for an individual node, while the global clustering coefficient is the average of this value for the entire network.</p>");
  break;
  case "egonetwork":
  d3.select("#codetext").html("<h3>Code</h3><p>Ego network code.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Ego Network</h2><p>Ego networks show the local area of a network around a node. In this case, it's fixed to any node within two steps of the node you click on.</p>");
  break;
  case "spatialproblem":
  d3.select("#codetext").html("<h3>Code</h3><p>Part of this code is from showing ego networks.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>The Spatial Problem</h2><p>The spatial problem in network visualization is the misrepresentation of similarity using space. By placing nodes on a visual plane, the implication is that nodes that are near each other spatially are near each other topologically. Unfortunately, this is often not the case. Here we can see nodes that are near each other spatially but distant from each other topologically.</p><p>A weighted version of this problem would not use raw ego networks but rather a fixed cost, and can be used to highlight, especially in transportation networks, how topography influences topology.</p>");
  break;
  case "forcealgo":
  d3.select("#codetext").html("<h3>Code</h3><p>This relies on the standard D3.js force-directed layout behavior.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Force-Directed Layout</h2><p>A popular method for laying out networks is to assign repulsive and attractive forces to nodes and links so that the emergent behavior of the competing forces produces a network that is more legible than manually or hierarchically placing the nodes. These competing forces are typcially a repulsive force exerted by nodes (which can be based on a numerical attribute of the node or a fixed value), an attractive force exerted by shared links between nodes (which can be based on the strength of the length, typically known as \"weight\" or fixed) and a canvas gravity that draws nodes toward the center of the screen and prevents them from being pushed beyond the view of the user.</p><p>Force-directed layouts do not typically assign any value to a node being placed along the x- or y-axis beyond the confluence of forces acting upon it from nearby nodes and links. As a result, even a very stable and readable force-directed layout can be mirrored or rotated without otherwise changing. This has had the effect upon scholars of assuming that there was something wrong with a force-directed layout that placed a node on the 'top' or 'left' in one layout but on the 'bottom' or 'right' in another. Such behavior is part of the force-directed layout unless specifically designed otherwise.</p>");
  break;
  case "plotlayout":
  d3.select("#codetext").html("<h3>Code</h3><p>The code first shuts down the force-directed algorithm, then transforms the location of the nodes and edges using typical transition() behavior, then updates the .x/.px/.y/.py attributes so that if the force-directed algorithm is reinitialized, it restarts with nodes and edges in the proper position.</p>");
  d3.select("#citations").html("<h3>Citations</h3><ol><li>...</li><li>...</li></ol>");
  d3.select("#lessontext").html("<h2>Plot Layouts</h2><p>Nodes are ultimately data points with lines drawn between them. As such, they can be plotted like any data points by setting their position based on such attributes. This is used for nodes that represent geographic entities by placing them using their geographic coordinates, and can be used in traditional scatterplot fashion using built-in functionality in network analysis and visualization packages such as Gephi.</p>");
  break;
  
  }
}

function initializeGraph(newGraph) {
newNodes = [];
newLinks = [];
//We need a hash to fit the link structure of D3's force-directed layout
nodeHash = {};

for ( x = 0; x < newGraph.nodes.length; x++ ) {
  newNodes.push(newGraph.nodes[x]);
  nodeHash[String(newGraph.nodes[x].id)] = x;
}

for ( x = 0; x < newGraph.links.length; x++ ) {
  newLinks.push({id: x, source: newGraph.nodes[nodeHash[newGraph.links[x].source]], target: newGraph.nodes[nodeHash[newGraph.links[x].target]], "cost": newGraph.links[x].cost, "weight": newGraph.links[x].invcost });
}

force = d3.layout.force()
    .size([width, height])
    .nodes(newNodes) // initialize with a single node
    .links(newLinks)
    .linkDistance(60)
    .charge(-60)
    .on("tick", tick);

var svg = d3.select("#viz").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "networkViz");

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("id","backgroundRect")
    .on("mousemove", mousemove);

nodes = force.nodes();
links = force.links();
node = svg.selectAll(".node");
link = svg.selectAll(".link");
arrowhead = svg.selectAll(".link");

cursor = svg.append("circle")
    .attr("transform", "translate(-100,-100)")
    .attr("class", "cursor")
    .attr("r", 1)
    .style("opacity", 0);

restart();
}

function mousemove() {
  cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
}

function mousedown() {
  var point = d3.mouse(this),
      node = {id: nodes.length, label: "Node" + nodes.length, lat: .5, long: .25, weight: 1, x: point[0], y: point[1]},
      n = nodes.push(node);

// add links to any nearby nodes
  nodes.forEach(function(target) {
    var x = target.x - node.x,
        y = target.y - node.y;
    if (Math.sqrt(x * x + y * y) < 30) {
      links.push({id: links.length, source: node, target: target, cost: .5});
    }
  });

restart();
}

node.attr("transform",function(d) {return "translate(" + d.x + "," + d.y + ")"})
    
    arrowhead
    .attr("cx", function(d) {return ((d.target.x * .9) + (d.source.x * .1))})
    .attr("cy", function(d) {return ((d.target.y * .9) + (d.source.y * .1))})

}

function changeGravity() {
    d3.select("#definitionbox").html("Canvas gravity draws all nodes toward the center of the canvas, preventing them from flying out of view.");
}

function highlightNodes() {
  d3.selectAll("circle.node").transition().duration(300).style("stroke-width", 5);
  d3.selectAll("circle.node").transition().delay(300).duration(300).style("stroke-width", 0);

if (document.getElementById('nodeCheckbox').checked == true) {
    document.getElementById("repulsionSlider").disabled=true;
    d3.select("#definitionbox").html("Nodes exert a repulsion on other nodes based on their degree centrality.");
  }
  else {
    document.getElementById("repulsionSlider").disabled=false;
    d3.select("#definitionbox").html("Nodes exert a fixed value of repulsion set with the slider.");
  }
}

function highlightEdges() {
  d3.selectAll("line.link").transition().duration(300).style("stroke", "black");
  d3.selectAll("line.link").transition().delay(300).duration(300).style("stroke", "#999999")

if (document.getElementById('edgeCheckbox').checked == true) {
    document.getElementById("attractionSlider").disabled=true;
    d3.select("#definitionbox").html("Nodes attract connected nodes based on the strength of the shared link.");
  }
  else {
    document.getElementById("attractionSlider").disabled=false;
    d3.select("#definitionbox").html("Nodes attract connected nodes based on the fixed value set on the slider.");
  }
}

function restart() {
  link = link.data(links);
  arrowhead = arrowhead.data(links);

node = node.data(nodes);

nodeg = node.enter().insert("g", ".cursor")
      .attr("class", "node")
      .call(force.drag);

nodeg.append("circle")
      .attr("r", 1)
      .attr("class", "node")
      .style("stroke-width", 0)
      .style("stroke", "#808080")
      ;

nodeg.append("text")
      .attr("x", -5)
      .attr("y", -5)
      .attr("class", "node")
      .text(function(d) {return d.label})
      .style("display", "none")
      ;
      
  nodeg.append("image")
      .attr("class", "node")
      .attr("xlink:href", function(d) { return ("dot.svg")});
      
  node.exit().transition().duration(300).attr("r",1).remove();

link.enter().insert("line", ".node")
      .attr("class", "link");
      
      link.exit().remove();
      
  
  arrowhead.enter().insert("circle", ".node")
    .attr("class", "arrowhead")
    .attr("r",2)
    .style("opacity", function() {return (document.getElementById('directedCheck').checked == true) ? 1: 0});
    
    arrowhead.exit().remove();

force.start();
  //Apparently you have to delay the resizing to keep D3 from holding the elements that are supposed to be .removed()  
  resize(currentSizing);

}

function getBetweenness() {
  //
  updateText("Betweenness");
}

function updateForce() {
  force.stop();
  
  var newGravity = document.getElementById('gravitySlider').value;
  var newCharge = document.getElementById('repulsionSlider').value;
  var newLStrength = document.getElementById('attractionSlider').value;
  
  document.getElementById('gravityInput').value = newGravity;
  document.getElementById('repulsionInput').value = newCharge;
  document.getElementById('attractionInput').value = newLStrength;
  
  force
  .charge(newCharge)
  .linkDistance(newLStrength)
  .gravity(newGravity)
  ;
  
  
  if (document.getElementById('edgeCheckbox').checked == true) {
  var minWeight = d3.min(links, function(d) {return parseFloat(d["cost"])});
  var maxWeight = d3.max(links, function(d) {return parseFloat(d["cost"])});
  
  //notice this is the reverse of the max/min ramp in the styling, because we're not determining link strength but the inverse: Link Distance
  var edgeRamp = d3.scale.linear().domain([minWeight,maxWeight]).range([.5,3]).clamp(true);

force.linkDistance(function(d) {return (edgeRamp(parseFloat(d["cost"])) * 30)})
  }

if (document.getElementById('nodeCheckbox').checked == true) {
      var minSize = d3.min(nodes, function(d) {return parseFloat(d["weight"])});
      var maxSize = d3.max(nodes, function(d) {return parseFloat(d["weight"])});
      var sizingRamp = d3.scale.linear().domain([minSize,maxSize]).range([1,10]).clamp(true);
      
    force.charge(function(d) {return (sizingRamp(parseFloat(d["weight"])) * -20)})
  }

force.start();
}

function establishLinks(inGraph) {
var outGraph = {nodes: [], links: []};
//We need a hash to fit the link structure of D3's force-directed layout
nodeHash = {};

for ( x = 0; x < inGraph.nodes.length; x++ ) {
  outGraph.nodes.push(inGraph.nodes[x]);
  nodeHash[String(inGraph.nodes[x].id)] = x;
}

for ( x = 0; x < inGraph.links.length; x++ ) {
  outGraph.links.push({source: inGraph.nodes[nodeHash[inGraph.links[x].source]], target: inGraph.nodes[nodeHash[inGraph.links[x].target]], "cost": inGraph.links[x].cost, "weight": inGraph.links[x].invcost });
}

return outGraph;

}

function randomGraph(nodeNumber, linkChance) {

newGraphObj = {nodes: [], links: []};

heightRamp=d3.scale.linear().domain([minY,maxY]).range([550,50]).clamp(true);
  widthRamp=d3.scale.linear().domain([minX,maxX]).range([50,450]).clamp(true);
  
  d3.selectAll("g.node").transition().duration(1000).attr("transform",function(d) {return "translate(" + widthRamp(parseFloat(d["long"])) + "," + heightRamp(parseFloat(d["lat"])) + ")"})

for (x in nodes) {
    nodes[x].x = widthRamp(parseFloat(nodes[x].long));
    nodes[x].px = widthRamp(parseFloat(nodes[x].long));
    nodes[x].y = heightRamp(parseFloat(nodes[x].lat));
    nodes[x].py = heightRamp(parseFloat(nodes[x].lat));
  }
  
  link.transition().duration(1000).attr("x1", function(d) { return widthRamp(d.source.long); })
      .attr("y1", function(d) { return heightRamp(d.source.lat); })
      .attr("x2", function(d) { return widthRamp(d.target.long); })
      .attr("y2", function(d) { return heightRamp(d.target.lat); });

arrowhead.transition().duration(1000)
    .attr("cx", function(d) {return ((d.target.x * .9) + (d.source.x * .1))})
    .attr("cy", function(d) {return ((d.target.y * .9) + (d.source.y * .1))})

}

function clearGraph() {

}
function deleteNodes(nodeArray) {
  var y = links.length - 1;
    while (y > -1) {
    if (nodeArray.indexOf(links[y].source.id) + nodeArray.indexOf(links[y].target.id) > -2) {
      links.splice(y,1);
    }
    y--;
  }
  var y = nodes.length - 1;
  while (y > -1) {
    if (nodeArray.indexOf(nodes[y].id) > -1) {
      nodes.splice(y,1);
    }
    y--;
  }

restart();

}
function deleteRandomNodes() {
  var randomNodeArray = getRandomSubarray(nodes, 5);
  var sampledIDValues = [];
  
  for (x in randomNodeArray) {
    sampledIDValues.push(randomNodeArray[x].id)
  }
  
  deleteNodes(sampledIDValues);  
}

function getRandomSubarray(arr, size) {
    var shuffled = arr.slice(0), i = arr.length, temp, index;
    while (i--) {
        index = Math.floor(i * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(0, size);
}

var sizingRamp = d3.scale.linear().domain([minSize,maxSize]).range([1,10]).clamp(true);
  var edgeRamp = d3.scale.linear().domain([maxWeight,minWeight]).range([.5,3]).clamp(true);
  
  switch(byValue)
  {
    case "nothing":
      d3.selectAll("circle.node").attr("r", 5)
      
      d3.selectAll("image.node").attr("x", -2.5)
      .attr("y", -2.5)
      .attr("width", 5)
      .attr("height", 5);

break;
    case "degree":
      d3.selectAll("circle.node").attr("r", function(d) {return sizingRamp(d["weight"])})
      
      d3.selectAll("image.node").attr("x", function(d) { return -((sizingRamp(d["weight"]))/2)})
      .attr("y", function(d) { return -((sizingRamp(d["weight"]))/2)})
      .attr("width", function(d) { return (sizingRamp(d["weight"]))})
      .attr("height", function(d) { return (sizingRamp(d["weight"]))});

break;
    }
    
    d3.selectAll("line.link").style("stroke-width", function(d) {return edgeRamp(d["cost"])})
}

// Two possibilities, either we're running an individual search, in which case we stop when we find the path, or we're aggregating values for the entire graph, in which case we run the paths from every node to every node
      var aggregatedSourceID = 0;
      while ((searchType == "individual" && pathFound != true) || (searchType != "individual" && aggregatedSourceID < nodes.length)) {

// Set a fresh TargetID in this loop;
      var aggregatedTargetID = 0;
      
      //For aggregated statistics, we start at node 0 and calculate for all nodes
        if (searchType == "aggregate") {sourceID = nodes[aggregatedSourceID].id;}

// we need to know for each source the vertices that have been calculated
      var visitedVertices = [];

//but we store those vertices in an object array, this allows us to indexOf the previous array and jump to the specific cost for the calculated vertex(node)
      vertexCost = {};
      
      // set the cost to infinity so that we know what we've calculated and what we haven't
      for (n in nodes) {
        vertexCost[nodes[n].id] = +Infinity;
      }

// the source node is 0
      vertexCost[sourceID] = 0;
// and thus is calculated
      calculatedVertices = [sourceID];
// parentVertex is used to walk back through the network once we've calculated the shortest path because the aggregate of shortest paths is the shortest path in a network
      parentVertex = {};

// we need a signal to point out that we've found a path for the individual check
      var pathFound = false;
//we set a high minimum value because we need to cycle through the links to pick the lowest cost link to calculate first
      var minimumValue = 9999;

//these are variables for holding possible source/target pairs
      var sourceValue = "";
      var targetValue = "";
      
//we store the links in a separate object so that we can reference them with source/target pairs to highlight them later
      var linkID = 0;
      linkList = {};

//there are two possibilities: we're looking for one route, in which case we want to stop when we find the path, or we're looking for all routes, in which case we want to stop when we reach the end of the list of nodes      
      while ((searchType == "individual" && pathFound != true) || (searchType != "individual" && aggregatedTargetID < nodes.length)) {

//set the targetID to the current aggregate target node in the loop, if running the aggregate search
        if (searchType == "aggregate") {targetID = nodes[aggregatedTargetID].id;}

while (pathFound == false ) {
      minimumValue = 9999;
      sourceValue = "";
      targetValue = "";
      linkID = 0;

for (z in links) {
          var otherVertex = "none";
          var startVertex = "none";
          //find the next edge to check and make sure it's the lowest value
          if (calculatedVertices.indexOf(links[z].source.id) > -1 && calculatedVertices.indexOf(links[z].target.id) == -1) {
            startVertex = links[z].source.id;
            otherVertex = links[z].target.id;
          }
          //undirected search looks at target->source as well
          else if (directedSearch == false && calculatedVertices.indexOf(links[z].target.id) > -1 && calculatedVertices.indexOf(links[z].source.id) == -1) {
            startVertex = links[z].target.id;
            otherVertex = links[z].source.id;
          }
          if (otherVertex != "none") {
            if ((parseFloat(links[z].cost) + vertexCost[startVertex]) < minimumValue) {
              minimumValue = (parseFloat(links[z].cost) + vertexCost[startVertex]);
              sourceValue = startVertex;
              targetValue = otherVertex;
              linkID = z;
            }
          }
        }

// if the minimum value is still 9999, then that means no paths were discovered, and there is no path
              if (minimumValue == 9999) {
//                vertexCost[targetID] = +Infinity;
                calculatedVertices.push(targetID);
                pathFound = true;
              }
              else {
                vertexCost[targetValue] = minimumValue;
                parentVertex[targetValue] = sourceValue;
                calculatedVertices.push(targetValue);

//For a multidimensional object, you have to check and add new objects on-the-fly  
                if (!linkList[sourceValue]) {
                  linkList[sourceValue] = {};        
                }
                linkList[sourceValue][targetValue] = linkID;

if (targetValue == targetID) {
                  pathFound = true;
                }
              }

}

var computedPathArray = [];
 computedEdgeArray = [];
 // this is causing a strange error, so if the type is aggregate, just skip it
 if (minimumValue != 9999 && parentVertex[targetID]) {

var reversePath = targetID;
               computedPathArray = [];
              while (reversePath != sourceID) {
                computedPathArray.push(reversePath);
                computedEdgeArray.push(linkList[parentVertex[reversePath]][reversePath]);
                reversePath = parentVertex[reversePath];
                graphStats[reversePath]["Betweenness"] += 1;
              }
              //we shouldn't increase the source or target value for any paths, so decrement the sourceID betweenness
                graphStats[sourceID]["Betweenness"] -= 1;
              computedPathArray.push(sourceID);
              computedEdgeArray.push(linkList[sourceID][parentVertex[reversePath]]);

}
 else if (searchType == "individual") {
  computedPathArray = ["Path not found"];
  computedEdgeArray = ["Path not found"];
 }

aggregatedTargetID++;
  var alreadyComputed = true;
  if (aggregatedTargetID < nodes.length) {
    
  while (alreadyComputed == true && (nodes[aggregatedTargetID]) ) {
    
    //find out if we've already computed the new target as part of an earlier path
    if (calculatedVertices.indexOf(nodes[aggregatedTargetID].id) > -1) {
      aggregatedTargetID++;
    }
    else {
      alreadyComputed = false;
    }
  }
  
  }
  
}
  var sumOfConnectedNodes = 0;
  var totalOfConnectedDistance = 0;
  for (x in vertexCost) {
    if (vertexCost[x]) {
      if (vertexCost[x] != +Infinity) {
        sumOfConnectedNodes++;
        totalOfConnectedDistance += vertexCost[x];
      }
    }
  }
  
  graphStats[sourceID]["Total Connectivity"] = sumOfConnectedNodes;
  if(sumOfConnectedNodes == 0) {
    graphStats[sourceID]["Average Path Length"] = 0;        
  }
  else {
    graphStats[sourceID]["Average Path Length"] = totalOfConnectedDistance / sumOfConnectedNodes;    
  }

aggregatedSourceID++;
}
if (searchType == "individual") {
 return {nodes: computedPathArray, paths: computedEdgeArray};
}
else {
 return graphStats;  
}
}

function selectPath() {
  d3.selectAll("g.node").on("click",setSource).style("cursor", "pointer")
  d3.select("#definitionbox").html("Select a node to compute a path from");
}

function setSource(d) {
  pathSource = d.id;
  d3.selectAll("g.node").on("click",setTarget);
  d3.select("#definitionbox").html(d.id + "selected - select a node to compute the path to");

}

pathSource = "";
  
}

function sizeByStats(statname) {
    var minStat = 9999;
  var maxStat = 0;
    for (x in nodes) {
            if (graphStats[nodes[x].id]["Total Connectivity"] != 0) {
              minStat = Math.min(minStat, graphStats[nodes[x].id][statname]);
              maxStat = Math.max(maxStat, graphStats[nodes[x].id][statname]);
            }
    }
    
        d3.select("#definitionbox").html("Nodes are now sized by " + statname);

}

function calculateCentrality() {
  var directedValue = document.getElementById('directedCheck').checked;
    d3.select("#definitionbox").html("Calculating paths...");
  //Here's closeness, at least
  graphStats = pathfinding(0,0,directedValue,"aggregate");
  
    sizeByStats("Average Path Length");

//  var sizeRamp = d3.scale.linear().domain([minConnected,maxConnected]).range([1,10]).clamp(true);
//  d3.selectAll("circle.node").attr("r", function(d,i) {return sizeRamp(graphStats[nodes[i].id]["Total Connectivity"])});
  
}

function showEgoNetwork() {
  d3.selectAll("g.node").on("click",findEgo).style("cursor", "pointer");
  d3.select("#definitionbox").html("Select a node to see its 2-Degree Ego Network");
}

function findEgo(d) {  
  d3.select("#definitionbox").html("<span style='color:blue;'>All nodes within 2 steps of</span><span style='color:purple;'> " + d.label + "</span>");
  d3.selectAll("g.node").on("click",null).style("cursor", "auto");
  var directedValue = document.getElementById('directedCheck').checked;
  var computedEgoArray = findEgoNetwork(d.id, 2, directedValue,"individual");

d3.selectAll("circle.node").style("fill", function(p) {return p.id == d.id ? "purple" : computedEgoArray.indexOf(p.id) > -1 ? "blue" : "pink"})

}

function spatialProblem() {
  var closeNodes = [];

//We can decrement the ego network size
var egoNetworkSize = 5;
while (closeNodes.length == 0) {
egoNetworkSize--;

function changeImage(newImageName) {
      d3.selectAll("image.node").attr("xlink:href", function(d) { return ("" + newImageName + ".svg")});  
}

//Local clustering coefficient is equal to the number of connected nodes divided by the connectivity of those nodes between each other
    localClusteringCoefficient[nodes[x].id] = discoveredLinks / totalPossibleClustering;
    maxClustering = Math.max(localClusteringCoefficient[nodes[x].id], maxClustering);
    minClustering = Math.min(localClusteringCoefficient[nodes[x].id], minClustering);
    }
  }
  d3.selectAll("circle.node")
  
    var sizeRamp = d3.scale.linear().domain([minClustering,maxClustering]).range([2,10]).clamp(true);
  d3.selectAll("circle.node").transition().duration(300).attr("r", function(d,i) {return sizeRamp(localClusteringCoefficient[nodes[i].id])});
  d3.selectAll("image.node").transition().duration(300)
  .attr("height", function(d,i) {return sizeRamp(localClusteringCoefficient[nodes[i].id])})
  .attr("width", function(d,i) {return sizeRamp(localClusteringCoefficient[nodes[i].id])})
  .attr("x", function(d,i) {return -(sizeRamp(localClusteringCoefficient[nodes[i].id]) / 2)})
  .attr("y", function(d,i) {return -(sizeRamp(localClusteringCoefficient[nodes[i].id]) / 2)});
  
}

function hierarchicalLayout() {
    for ( y = 0; y < nodes.length; y++ ) {
		nodes[y].fixed = false;
}

tick();
force.stop();

var orbitRank = 0;

orbitArray = {};

orbitArray[centerID] = 0;

var totalLinks = links.length;
	var openLinks = 0;
	orbitalRings = [1]

while (openLinks < totalLinks){
		for ( z = 0; z < links.length; z++) {
			if (links[z].target.fixed == true && links[z].target.fixed == true) {
				openLinks++;
			}
			else if (links[z].target.fixed == true) {
				assignedID = (links[z].source.id);
				assignedValue = (orbitArray[links[z].target.id] + 1);
				links[z].source.fixed = true;
				orbitArray[assignedID] = assignedValue;
				orbitalRings[orbitArray[links[z].target.id] + 1]++;
			}
			else if (links[z].source.fixed == true) {
				assignedID = (links[z].target.id);
				assignedValue = (orbitArray[links[z].source.id] + 1);
				links[z].target.fixed = true;
				orbitArray[assignedID] = assignedValue;
				orbitalRings[orbitArray[links[z].source.id] + 1]++;
			}
		}
	}

}
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js