An iterative workflow for creating biomedical visualizations using Inkscape and D3.js

Background

Many biological disciplines use data visualization alongside computational methods to explore large-scale biomedical data. Visualization often provides insight into patterns in the data that are not available in the numerical data and statistics[1]. The development of new visualization tools requires the use of sophisticated software and programming skills. Commercial standalone software like Tableau[2] create multiple types of common visualizations and have the ability to customize certain features. There are also freely available software libraries like D3.js[3] that can be used to make interactive web applications based on static or dynamic data. Nevertheless, modern data visualization is highly sophisticated, and creating customized visualizations to interact with a specific dataset can be challenging for a variety of reasons. Specifically with D3.js, which builds a scalable vector graphic (SVG) programmatically, generating the visualization is a process of trial and error. The programmer generates SVG markup manually and then views it with a browser and does this iteratively until the final graphic is realized. We present an iterative workflow shown in Figure 1 that simplifies the creation of SVG images using freely available software. We demonstrate this workflow in constructing an interactive dashboard to track clinical trial enrollment.

Figure 1

Workflow diagram.

Materials and methods

Using the Scalable Vector Graphics (SVG) language[4] and the open source SVG authoring tool Inkscape[5], we created and tested several prototypes for visualizing clinical trial enrollment across nine adult hospitals in Jefferson County. The information required by a clinical trial manager included the number of total enrollments per hospital and other contextual data related to the number of enrollments such as the numbers admitted, screened and eligible for the two trials, UAD and HAPPI. A layered bar graph design, shown in Figure 2, provided an efficient method for displaying the necessary information within the appropriate context and in the smallest space. After creating the mockup of the system in Inkscape, it is saved as an SVG document and imported into a live website. Inkscape assigns variable names to each primitive object at the time of creation. The D3.js library can then be used to access the properties of these objects and manipulate them according to the data.

Figure 2

Layered bar graph created in Inkscape for use in clinical dashboard.

Results

The enrollment dashboard prototype was created over the course of 1 week. Many hours were saved on the development of each feature by allowing the design of SVG prototypes without needing to learn the language-specific layout syntax.

Conclusions

SVG prototypes developed in Inkscape can be adapted for use with advanced visualization libraries like D3.js to form an iterative workflow for creating customized visualizations and dashboards. While manipulating interactive SVG still requires knowledge of JavaScript, our approach significantly reduces the development time.