Interactive data visualization with D3.JS

This week Anisha Keshavan gave a presentation on visualizing complex data using the Javascript library D3.js. We discussed some of the benefits of using web browsers to share and explore data, and learned the fundamentals of D3 by making an interactive bar plot.

Key ideas and summary

Many datasets in neuroinformatics are very large, and could benefit from better visualization and online collaboration methods. D3.js is a Javascript library which is used for making interactive browser data visualizations. Like other Javascript libraries, D3 relies on HTML and CSS as the base webpage format.

HTML

HTML is the standard markup language for making web pages. In HTML, tags formatted like <div> </div> surround page elements and help define the distinct sections of the page.

CSS

CSS classes define a set of style attributes like font color and margin size, which can then be applied to multiple HTML elements.

JS

In Javascript we can use event listeners to respond to user actions in the browser. Among other things, we can add or remove HTML elements, change the CSS class of specific HTML elements, or dynamically update the webpage with real-time data streams. The D3 library adds efficient syntax to select HTML elements and apply built-in data visualization functions.

Examples of interesting D3.JS plots

• Metasearch visualizes data as an interactive parallel coordinate plot.

• A visual introduction to machine learning uses browser scroll event listeners to animate diagrams and graphs.

• The New York Times uses D3.JS for many different kinds of interactive maps and infographics.

Tutorials and further reading

In addition to Anisha’s presentation, there are many helpful tutorials for learning D3JS, such as these ones by Square, Aysegul Yonet, and Michele Weigle.