Web Graph
v0.2.1
I began to wonder, how does my website relate to others?
Where is it in the network of nodes?
So I got to work, and made this, web-graph. It visualises my website and its resulting shape via graph nodes (courtesy of react-force-graph-3d).
There are three sets of data to view. Internal, Fringe, and Follow. Internal only includes urls that have thefarrelly as the domain. Fringe includes internal urls as well as external, but only as leaf nodes. Follow takes it one step further and shapes the referenced external url on its own domain.
You can either watch the network being constructed (node added every 0.5s), or skip to see the final result.
What shape do you think this website takes?
Controls
You can use your mouse, finger, or trackpad:
- Hold click/tap to rotate.
- Pinch/scroll to zoom.
- Click/tap playback (bottom left) to pause, play, restart.
- Click/tap orbit (bottom right) to start, or stop orbit (orbit only during pause/end).
- Click/tap notifications (top right) to hide, or show node info notifications.
1. Select the data type,
2. Choose the viewing mode,
Woah, no(de) way that's so cool!
Code
In order to create this graph node representation, I first needed to make a web crawler. So I did. You can check it out here, web-crawler.
In essence the crawler starts at one URL, 'https://thefarrelly.com', grabs all hrefs on the page and adds them to a queue. It then iterates through the queue visiting each web page and grabbing more and more hrefs until it has run out.
Each of these hrefs are represented as nodes above, along with a link showing the relationship between page and sub-page(s).
If you're wondering what your website would look like represented as nodes, you could pull down both projects and find out. Both the UI above and the web-crawler are open-sourced and ready to be used.
What shape do you think your website will take?