Multi-access keys and D3 - what's the link?

User-interface of Xper2 multi-access keyD3 is shorthand for 'Data Driven Documents' - an extremely flexible and powerful toolset for visualising data on the web developed by Mike Bostock. Here I outline why D3 is of interest to Tomorrow's Biodiversity.

When I was looking into computer-based keys and trying to work out why they hadn't really penetrated the toolset of many biological recorders, I concluded that one reason was their interfaces; they are not normally presented to users in very engaging ways (full report here). Even recent developments, such as the excellent Xper project from the Laboratoire Informatique et Systématique, continue to present very 'traditional', and rather clunky, interfaces to users (see the screenshot of Xper2). (There are recent exceptions such as the impressive Go Botany key for the vascular flora of New England.)

I also became interested in the potential of multi-access keys to accelerate learning; at their best, multi-access keys can give their users powerful insights into the taxonomic knowledge bases that underly them. In other words, using a multi-access key could speed up the process of assimilating the real knowledge that allows us to identify species. I realised that this could be treated as a separate problem from identifying a specimen in the hand - the main use of a multi-access key - and that we could think about new tools, built on top of the very same knowledge bases driving multi-access keys, that could specifically address this.D3 circle packing example

So I began thinking about this whole area in terms of exploring and visualising knoweldge bases as well as using them for the specific problem of specimen identification. I looked around for technology that would allow us to develop sophisticated and engaging user interfaces and views on data that could be rolled out easily without the need for special software or plugins. It didn't take me long to find D3. Without getting too technical, I'll just say that D3 is a an open-access Javascript library that facilitates the creation of data visualisation - infographics or whatever you want to call it - on websites using the standard web technologies supported by virtually every modern web browser.

D3 infographic illustrating US tax ratesD3 has been received with a great deal of excitement amongst people with a keen interest in data visualisation and it's not hard to see why. Look at this example from Mike Bostock illustrating tax rates forD3 force layout example U.S. companies. Aside from being a visually attractive static infographic in its own right, it really comes into it's own when you, the viewer, start interacting with it. Buttons allow you to switch between two completely different views of the data - you can look at the overall picture (as shown in the image here) or see the companies separated by industry sector. And here's the magic thing: when you click the button, it doesn't just switch from one infograhphic to another, instead the bubbles representing each company move across the screen to take up their positions on new axes.

It's this seamless transformation - this animation - more than anything, that provides a really engaging experience for the viewer of these data. See what happens when you type the name of a company, e.g. 'Google', into the text box provided. Type slowly - watch what happens as you type each letter. This is very different from a traditional static repD3 tree exampleresentation of information: it puts you in the driving seat. You are in charge. You can go look for the information that interests you the most.

D3 force collision exampleNow imagine a graphic with bubbles representing species in a taxonomic group that interests you. Imagine being able to provide different values for different properties - maybe the presence or absence of spines or the length of a certain morphological character. Imagine watching those bubbles react to the information you supply - perhaps changing their positions or sizes or colours or visibilities. That's why Tomorrow's Biodiversity is interested in D3. The small images on this page are links to pages illustrating just a few of the many ways in which D3 can represent data and interact with viewers. They should give you an impression of what is possible.

Before long we hope to show you some real taxonomic examples.