Visualizing Pagerank output with D3.js

Last year I started learning D3.js library. I did some cool stuff with it. But one of the works which I am really proud of is Webpage PageRank visualization using D3.js.

As a web developer, you must be pretty acquainted with D3.js library. It's a visualization and graph library. This was also one of the most useful and easy to use graph drawing utility I ever used. (And this applies to any language, not just JavaScript).

While I was playing with it, a thought touched my mind what if visualize our PageRank project using it? Looked like quite a good idea.

To summarize graph

  • Pages are represented in the form of circular nodes
  • Pagerank value of page is directly proportional to its Pagerank. More the Pagerank, larger is the node radius
  • An arrow pointing from node A to B indicates page A has link to the page B
  • Node receiving more incoming links tend to have higher Pagerank score while outgoing links tend to reduce the score by some margin

Here are some of the screenshots of the project,

Page Rank 1

Page Rank 2

There is also a way to view multiple links simulation by allowing multiple demos to appear successively on the page

Page Rank 3

Though I have stopped working on this project for a while, I am pretty sure there are lot of areas for future improvements.

The code is hosted on Github Here

You can play with the demo by varying the Number of Links parameter Here

I would love to hear what do you think about this project!

Jayesh Kawli

I am a web and mobile developer working at Wayfair in Boston, MA. I come to learn so many things during course of life and I write about things which helped me and feel like they can help others too.

Subscribe to Fresh Beginning

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!