When we explore a web site, the usual view is that of a tree structure of pages. I wondered if it could be done instead using topics. Which topics are mentioned on a given page? What other topics do those pages refer to and so on?
Node focus force directed diagram
I first thought of using a collapsible force diagram but those need a tree structure – and woul dbe no different that a treeview index. So I went for a modification of that, using d3.js. Here’s a snap of the mapping of the excel liberation site showing the connections between topics and pages.
Clicking on a few pages and topics (they are the nodes shown in black below) focuses in like this. Double clicking on any node takes me to the referenced page.
I generate this data using Google Apps Script, from a Google Hosted Site, and store the data on google drive for later retrieval into Google Spreadsheets or Excel. I happen to be using site/tag data but any data that relates topics to subjects is a good candidate for this kind of visualization. Here’s a snap of the input data in Excel
Generating the visualization.
Do you need Excel for this?
For the non- browser challenged, here is the viz of the Excel Liberation site.