D3 Examples - Understanding PageRank in a network graph

Visualizing pagerank of nodes in a graph.

Example studied is that of extracting most informative sentences from a textual document for auto summarization. Uses the LexRank algorithm. A graph G is created where :

Nodes: All sentences of the document.

Edges: There is an edge between two nodes if the frequency vectors of the corresponding sentences have (cosine) similarity above a threshold. For more details on SentenceGraph, refer to TextGraphics

LexRank asserts that PageRank (now called LexRank) scores of sentences in such a graph can be used to rank sentences in the order of their relevance to the document. And in turn, can be used for generating a summary of teh document.

Usage:

The landing page has a sentence graph, created from the text of my answer to a question on Quora.

Click on the Rank Nodes button, the nodes will be re-sized according to their LexRank scores.

Click on a node will print the associated sentence on the right side of the canvas. Try different nodes to explore the sentences.

Click on the text of the sentence on the right side, will remove the sentence from the view.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
​
.link {
  stroke: #999;
  stroke-opacity: .8;
}
​
button{
  height: 30px;
  width: 200px;
  font-style: sans-serif;
  position: absolute;
  top: 15%;
  left: 1%;
  /*background-color: lightblue;*/
  font-size: 15px;
}
​
svg{
  position: absolute;
  top:20%;
  left:1%;
  /*background-color: red;*/
}
​
.div1{
  position: absolute;
  top:20%;
  left: 60%;
}
​
</style>
<body>
<h2>Understanding PageRank in a network graph.</h2>
<h3>Case Study: Ranking sentences in a document for auto text summarization.</h3>
​
<button>Rank Nodes</button>
<div class="div1"></div>
<!-- <script src="d3.js"></script> -->
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 800,
    height = 500;
​
​
var color = d3.scale.category20();
​
var x = d3.scale.linear()
        .range([7, 20]);
​
d3.select("button")
    .on("click", function(){
      svg.selectAll(".node")
        .transition()
        .duration(1000)
        .attr("r", function(d){return x(d.radius);});
      });
​
​
var force = d3.layout.force()
    .charge(-300)
    .linkDistance(200)
    .size([width, height]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("graphContents.json", function(error, graph) {
  if (error) throw error;
​
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();
​
  x.domain(d3.extent(graph.nodes, function(d){return d.radius;})).nice();
​
​
  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", 1.2);
​
​
  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .on("click", function(d){
        d3.select(".div1")
          .append("p")
          .attr("class", "p")
          .html(d.name)
          .on("click", function(){
            this.remove();
          }); 
      })
      .attr("r", 10)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);
​
  node.append("text")
      .attr("x", 12)
      .attr("dy", ".35em")
      .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; });
​
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
​
​
​
});
​
</script>
    