VI 7 Node Link

Rajyalakshmi Mukkamala

Node Link

Insight

1.Color reprentation is with respect to regions, states colored with same color to belong to same region. For example,Oregon,Washington and California belong to pacific region and nodes are colored red.

2.South Atlantic region has highest number of states i.e. 9 states.

Mouse hover on the node gives state name.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
  .node text {
  display: none;
  font: 10px sans-serif;
}

.node:hover circle {
  fill: #000;
}

.node:hover text {
  display: inline;
}

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

var width = 750,
    height = 600;

var color = d3.scale.category10();

var force = d3.layout.force()
    .gravity(0.1)
    .charge(-120)
    .linkDistance(100)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("states.json", function(error, graph) {
  if (error) throw error;

force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 8)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

var label = node.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.abb; });

var cell = node.append("path")
      .attr("class", "cell");

node.append("title")
      .text(function(d) { return d.name; });

force.on("tick", function() {
    
     
    
    link.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; });
    label
        .attr("x", function(d) { return d.x + 8; })
        .attr("y", function(d) { return d.y; });

node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});

</script>

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