There’s a lot of different things going on in this topic. Most of them have been covered before, and lead to this mashup, but I am introducing a new kind of d3 chart (for me anyway) – I’m calling it a force directed node focus chart. It’s kind of a collapsible force directed (as shown by Mike Bostok here), but no quite.
Not quite a tree
The data to be shown is generated by Google Apps Script from a Google Site, as shown in
Analyzing site content with GAS. For a collapsible force directed chart, the data would need to be in a tree format – so for example that would work for visualizing a the layout of the pages of a site, but in this case, I’m using data that shows the relationship between topics and the pages they are referenced from – that means that each topic can appear on multiple pages, and of course multiple pages can cover multiple topics. A tree layout would need each page to just have one parent.
Example
Here’s the generated chart – it’s a map of this site. Clicking on a topic or a page node will bring focus to that node and show all the pages or topics that link to it. Clicking on other nodes will add links to those too. Clicking on them again will remove them from focus. Double clicking will go to the page referenced if a page node, or some random page containing the topic if a topic node. When all focus nodes are removed, the whole chart will be shown again.