Graphing links 08 August 2013

This is an example of displaying content pulled from a PhantomJS webservice

I used this example when I talked about “serving websites to websites with PhantomJS” at this months Oxford Geek Nights

With phantomjs you are able to access more than just the HTML/DOM of a page - how the page is eventually rendered in a browser. In this example - we can pull out all the links of a page and find out what area (in pixels) they consume.

link areas on oxford geek nights

Using this script we can get a map of the links to the element areas, which looks something like this:

{
  "http://benjaminbenben.com/":6534,
  "http://bit.ly/Pesy75":10640,
  "http://lanyrd.com/cqfdw":18012,
  "http://mynameismartin.com/":8646,
  "http://oxford.geeknights.net/":84000,
  "http://oxford.geeknights.net/ogn29":52052,
  "http://oxford.geeknights.net/ogn30":52052,
  "http://oxford.geeknights.net/ogn31":52052,
  "http://oxford.geeknights.net/volunteer.html":29520,
  "http://torchbox.com/":4760,
  "http://twitter.com/oxfordgeeks":20112,
  "http://www.marianamota.com/":33128,
  "http://www.torchbox.com/":3360,
  "https://github.com/LuRsT":8580
}

Graphing the data

We can now pull in this data with AJAX and render it on the page using d3 (the force directed graph layout)

initially populated with this blog post, double click to check one of the urls.

examples