Inspired by the NYTimes Obama Budget display (http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0), as well as the zoomable circle packing example on the D3 Examples page, I was inspired to direct our intern to develop a web-based interface for navigation of a dataset. We (mostly he) can get the circle packing function to draw the hierarchical structure, zoom in, and zoom out, so the data is working. What we want to add is the ability to hover or click on a circle title (as opposed to clicking on the circle body) to display an interactive tooltip (I'm personally partial to the one shown here: http://iamceege.github.io/tooltipster/).
In very rough pseudo-code, we're looking for something like this:
on page load, draw hierarchical circles, label the outermost layer (top nodes)
on circle.body.click, zoom in; show node labels
on circle.body.rightclick, zoom out, adjust node label display accordingly
(I have no idea if rightclick is an appropriate event)
on circle.title.hover, display tooltip
on tooltip.object.click, take appropriate action (varies by tooltip part)
As you may have surmised, I'm no JavaScript programmer; my apologies for my grunt-and-scratch in the dirt approach here. Our intern has some level of skill, but is struggling. I feel like we're just a few handy tips away from success here.
Any help is greatly appreciated.
Cheers.
J.D.
