Harry Potter

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

.link {
  fill: none;
  stroke-width: 0.5px;
}

.link.win{
    stroke: #a6d96a;
}

.link.loss{
    stroke: #ca0020;
}

.node text {
  pointer-events: none;
  font: 10px sans-serif;
}

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

//Constants for the SVG
var width = 900,
  height = 900;

//Set up the colour scale
var color = d3.scale.category10();

//Set up the force layout
var force = d3.layout.force()
  .charge(-620)
  .linkDistance(200)
  .size([width, height]);

//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

//Read the data from the mis element
d3.json("hp.json", function(error, graph) {
    if (error) throw error;
//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
  .links(graph.links)
  .start();

//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });

//Do the same with the circles for the nodes - no
//Changed
var radiusScale = d3.scale.linear()

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

node.append("circle")
//  .attr("r", 8)
  .style("fill", function(d) {
    return color(d.group)
  })
  .attr('r', function(d) {
        	d.radius = radiusScale(d.count);
        	return d.radius;
        });

node.append("text")
  .attr("dx", 10)
  .attr("dy", ".35em")
  .text(function(d) {
    return d.name
  });
//End changed

node.on("mouseover", function (d) {
        var highlightedNodes = {};

link.style('stroke-width', function(l) {
				    if (d === l.source || d === l.target){
            highlightedNodes[l.source.name] = 1;
            highlightedNodes[l.target.name] = 1;
            return 2;
          }
          return 0;
				})
      });
//Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
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;
    });

link.attr("class", function(d) { return "link "+ d.value});

//Changed

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

d3.selectAll("text").attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y;
    });

//End Changed

});

});
</script>

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