Networks - Intro 2

Intro Example 2 for How to Create Effective Network Data Visualization

Here's the same network dataset from the last example laid out as a network. The force-directed layout that D3 uses (d3.layout.force) expects arrays of nodes and arrays of edges. In order to create those necessary arrays, we walk through the edgelist in firm.csv and create the referenced nodes from the source and target id values in the edge list.

The resulting ball of spaghetti is all too common in finished network data visualization. Compared to the earlier bar charts, this is a horrible data visualization product and says nothing, other than perhaps "this is complex" but mostly, "the person who created this is more interested in technology than they are in communication."

<html>
<head>
  <title>Drawing a simple network without filtering</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

d3.csv("firm.csv",function(error,data) {dataViz(data)});

function dataViz(incData) {

var nodeHash = {};
  var nodes = [];
  var edges = [];

incData.forEach(function (edge) {
    if (!nodeHash[edge.source]) {
      nodeHash[edge.source] = {id: edge.source, label: edge.source};
      nodes.push(nodeHash[edge.source]);
    }
    if (!nodeHash[edge.target]) {
      nodeHash[edge.target] = {id: edge.target, label: edge.target};
      nodes.push(nodeHash[edge.target]);
    }
    edges.push({source: nodeHash[edge.source], target: nodeHash[edge.target], weight: edge.weight});
  });

var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-200)
  .linkDistance(100)
  .on("tick", updateNetwork);

d3.select("svg").selectAll("line")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke-width", "1px")
  .style("stroke", "#CC9999");

d3.select("svg").selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .style("fill", "#996666")
  .attr("r", 5);

force.start();

function updateNetwork() {
    d3.select("svg").selectAll("line")
      .attr("x1", function (d) {return d.source.x})
      .attr("x2", function (d) {return d.target.x})
      .attr("y1", function (d) {return d.source.y})
      .attr("y2", function (d) {return d.target.y});

d3.select("svg").selectAll("circle")
      .attr("cx", function (d) {return d.x})
      .attr("cy", function (d) {return d.y});
  }

}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js