Networks - Nodes 2

Nodes Example 2 for How to Create Effective Network Data Visualization

A common method of representing nodes is to simply use the label as the node.

If you do this, make sure to adjust the cursor style to "pointer" so users don't mouse over the node and see the text selection cursor. Or set pointer-events to none on the text and place a fully transparent circle beneath them.

<html>
<head>
  <title>Nodes as labels</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) {createNetwork(data)});

function createNetwork(edgelist) {
  var nodeHash = {};
  var edgeHash = {};
  var nodes = [];
  var edges = [];

edgelist.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});
    }
  });
  createForceNetwork(nodes, edges);
}

function createForceNetwork(nodes, edges) {

//create a network from an edgelist

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", "#996666");

var nodeEnter = d3.select("svg").selectAll("g.node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .call(force.drag());

nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 5)
  .style("stroke-width", "4px")
  .style("stroke-opacity", 0.95)
  .style("stroke", "white")
  .text(function (d) {return d.id})
  .style("cursor", "default");

nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 5)
  .text(function (d) {return d.id})
  .style("cursor", "default");

force.start();

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

d3.select("svg").selectAll("g.node")
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});

}

}
</script>
  </footer>

</html>

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