← 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

Link Areas

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.

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)