Networks - Edges 1

Edges Example 1 for How to Create Effective Network Data Visualization

By filtering the network to only the 5 (or top) rated connections, we produce an actual structure that can be used for analysis and presentation. One of the most important steps in network data visualization is curation and editing of the network dataset.

Network data visualization only works if the network in question has moderate link density. If it has too many links or too few links, then you should collapse the links into other dimensions and represent the dataset in a different way.

Every time the network lays out it can rotate or mirror randomly. The confusion that this can cause to a reader is explored in more detail in an essay on gestalt principles I wrote a while back.

<html>
<head>
  <title>Drawing a simple network</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]);
    }
    if (edge.weight >= 5) {
      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)
  .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