2013-03-01

Force Directed Graph 2

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.

<input type="button" data-production="Firefly" value="Firefly"></input>
<input type="button" data-production="BuffytheVampireSlayer" value="Buffy the Vampire Slayer"></input>
<input type="button" data-production="Dr.HorriblesSing-AlongBlog" value="Dr. Horrible's Sing-Along Blog"></input>
<input type="button" data-production="MuchAdoAboutNothing" value="Much Ado About Nothing"></input>
<input type="button" data-production="Dollhouse" value="Dollhouse"></input>
<input type="button" data-production="Angel" value="Angel"></input>
<input type="button" data-production="TheCabinintheWoods" value="The Cabin in the Woods"></input>
view raw buttons.html hosted with ❤ by GitHub

Then I added a simple jQuery function to hook up these buttons and filter the graph

$("input").click(function() {
$("[data-productions]").css("fill", "steelblue");
$("[data-productions*='" + $(this).attr("data-production") + "']").css("fill", "green");
});
view raw buttonClick.js hosted with ❤ by GitHub

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 athttp://bl.ocks.org/stimms/5069532

There are a bunch of other fun customizations we could do to this visualization. Some of my ideas are:

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.


comment: