Untitled

<html><head>
    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
<div id="canvas" style="height: 600px; weight: 800px;"></div>
<div id="toolbar" style="height: 600px; weight: 800px;">
   <h1 id="toolbarTitle"></h1>
   <p  id="toolbarParagraph"></p>
</div>

<style>
.node {stroke: #fff; stroke-width: 1.5px;}
.node text {font: 10px sans-serif; color: #000000;}
.link {stroke: #999; stroke-opacity: 0.9;}
</style>

<script type="text/javascript">

      var width = 800, height = 600;
      var color = d3.scaleOrdinal(d3.schemeCategory10);

      var simulation = d3.forceSimulation()
         .force('link', d3.forceLink().id(function (d) { return d.id;}).distance(100).strength(1))
         .force('charge', d3.forceManyBody())
         .force('center', d3.forceCenter(width/2, height/2));

      var svg = d3.select('#canvas').select('svg');
      if (svg.empty()) {
         svg = d3.select('#canvas').append('svg')
            .attr('width', width)
            .attr('height', height);
      }

      d3.json('graph.json', function(error, graph) {
         if (error) throw error;
         update(graph.links, graph.nodes);

      function update(links, nodes) {

         var link = svg.selectAll('.link')
            .data(graph.links)
            .enter().append('line')
            .attr('class', 'link');

         var node = svg.selectAll('.node')
            .data(nodes)
            .enter().append('g')
            .attr('class', 'node')
            .call(d3.drag()
               .on('start', dragstarted)
               .on('drag',  dragged)
            )
            .on('click', connectedNodes);

      node.append('circle')
         .attr('r', 15)
         .style('fill', function(d) {
            return color(d.degree);
         });

      simulation
         .nodes(nodes)
         .on('tick', ticked);

      simulation.force('link').links(links);

       function ticked() {
        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;});

        node
            .attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});

         function dragstarted(d) {
            if (!d3.event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
         }

         function dragged(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
         }

         function dragended(d) {
            if (!d3.event.active) simulation.alphaTarget(0);
            d.fx = null;
            d.fy = null;
         }

         node.append('title')
            .text(function(d) {
               return "Node: " + d.id + "\n" + "Degree: " + d.degree + "\n" + "Katz: " + d.katz;
            });

         var toggle = 0;
         var linkedByIndex = {};
         for (var i = 0; i < graph.nodes.length; i++) {
            linkedByIndex[i + "," + i] = 1;
         }
         graph.links.forEach(function(d) {
            linkedByIndex[d.source.index + "," + d.target.index] = 1;
         });

         function neighboring(a, b) {
            return linkedByIndex[a.index + "," + b.index];
         }

         function connectedNodes() {
            if (toggle == 0) {
               var d = d3.select(this).node().__data__;
               node.style("opacity", function(o) {
                  return neighboring(d, o) || neighboring(o, d) ? 1 : 0.3;
               });
               node.attr('r', function(o) {
                  return neighboring(d, o) || neighboring(o, d) ? 20 : 15;
               });
               link.style("opacity", function(o) {
                  return d.index == o.source.index || d.index == o.target.index ? 1 : 0.8;
               });
               link.style('stroke-width', function(o) {
                  return d.index == o.source.index || d.index == o.target.index ? 3 : 0.8;
               });
               toggle = 1;
            } else {
               node.style('opacity', 1);
               link.style('opacity', 1);
               link.style('stroke-width', 1);
               toggle = 0;
            }
         }
       }
      });

</script>
</body>
</html>