Our goal for the hackathon was to create an interactive Web browser application to visualize human brain image data processed by the Mindboggle software package (Klein and Hirsch 2005, Klein et al. 2017). The Mindboggle project was initiated to improve the labeling as well as morphometry of brain imaging data, and to promote open science by making all data, software, and documentation freely and openly available. An interface for interactive visualization is essential for assessing issues in brain image processing and analysis, including surface reconstruction, labeling, and morphometry. Mindboggle processes human brain cortical surface meshes in the VTK format, and generates label and shape information for each anatomical region, where labels follow the Desikan-Killiany-Tourville protocol (Klein and Tourville 2012).

Over the course of two afternoons at the Human Brain Mapping 2015 conference’s hackathon, we evaluated several JavaScript libraries for creating browser-based WebGL visualizations of brain surfaces, including three.js, XTK, and BrainBrowser. Three.js was chosen for ease of use and degree of active development and community support. To accompany these surface visualizations with graphical plots, we chose the d3 JavaScript library for its flexibility and widespread use.

We completed an initial version of our browser-based interactive visualization tool; a left hemisphere of a human brain is available at http://roygbiv.mindboggle.info. Click and drag to rotate this brain, scroll to zoom in and out, and click on any region of the brain while pressing the shift key to produce an accompanying plot of shape measures for that region Fig. 1. This will render all other regions transparent. Fig. 2 shows the distributions of travel depth, geodesic depth, mean curvature, freesurfer curvature, and freesurfer cortical thickness for the selected region. Shift-click outside the brain to return opacity to all regions.

Figure 1.  

Example visualization

Figure 2.  

Example of a selected region and its accompanying boxplot.

After the hackathon, we refactored the code to use an object-based approach. This allows multiple brains to be shown simultaneously. This approach was used to create a master-slave interaction (Fig. 3): selection of a ROI in one hemisphere loads data for display on a second hemisphere. This approach was used in a dynamic poster presented at Society for Neuroscience in 2015 (Cipollini et al. 2015).

Figure 3.  

Example master/slave visualization

We have received very positive feedback for our efforts at the hackathon, and have since received several requests and encouragement to build this visualization out to accommodate other data besides shape information and to enable the visual evaluation of thousands of brains. We hope to continue this work with the help of others! To contribute to this project, please send pull requests to https://github.com/akeshavan/roygbiv (Cipollini et al. 2017).

This work was completed during the OHBM 2015 Brainhack. The authors would like to thank the 2015 Brainhack organizers and Roberto Toro for his javsacript expertise.