Yesterday I showed creating a force directed graph with a dataset taken from wikipedia. As it stood it was pretty nifty but it needed some interaction. Weâ€™re going to add some very basic interaction. Â To do this weâ€™ll use the data- attribute we added when building the graph. These attributes were added as part of HTML5 to allow attaching data to DOM elements. Any attributes which are prefixed with data- are ignored by the browser unless you specifically query for them.
I started by adding a set of buttons to the page, one for each show.
Then I added a simple jQuery function to hook up these buttons and filter the graph
First I reset the graph to is original color, then I select a collection of elements using the data-productions element. This is a stunningly inefficient way to select elements but we have a pretty small set of data with which weâ€™re working so Iâ€™m not overly concerned about the efficiency. It could be improved by using a css class instead of a data-attribute as these selectors have been optimized.
The final product is up atÂ http://bl.ocks.org/stimms/5069532
There are a bunch of other fun customizations we could do to this visualization. Some of my ideas are:
- Improve the display of name labels during hover
- Highlight linksÂ betweenÂ people when you hover over a node
- Show the number of collaborations when somebody hovers over a link
Thatâ€™s the best part of visualization: there is always some crazy new idea to try out. The trick is to know when to stop and what you can take away without ruining the message.