Skip to main content

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
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
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.

References

  1. Anscombe FJ: Graphs in Statistical Analysis. American Statistician. 1976, 27 (1): 17-21.

    Google Scholar 

  2. Bostock M: D3.js – Data-Driven Documents. [http://d3js.org] Accessed 22 Feb 2015

  3. Tableau Software: Business Intelligence and Analytics. [http://www.tableau.com] Accessed 22 Feb 2015

  4. Inkscape: [https://inkscape.org] Accessed 22 Feb 2015

  5. W3C SVG Working Group: [http://www.w3.org/Graphics/SVG] Accessed 22 Feb 2015

Download references

Acknowledgments

Support for JHC provided by National Institutes of Health (NIH) grant P20GM103436 (Nigel Cooper, PI).

Author information

Authors and Affiliations

Authors

Corresponding author

Correspondence to William A Mattingly.

Rights and permissions

This article is published under license to BioMed Central Ltd. This is an Open Access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. The Creative Commons Public Domain Dedication waiver (http://creativecommons.org/publicdomain/zero/1.0/) applies to the data made available in this article, unless otherwise stated.

Reprints and Permissions

About this article

Verify currency and authenticity via CrossMark

Cite this article

Mattingly, W.A., Kelley, R.R., Chariker, J.H. et al. An iterative workflow for creating biomedical visualizations using Inkscape and D3.js. BMC Bioinformatics 16, P10 (2015). https://doi.org/10.1186/1471-2105-16-S15-P10

Download citation

  • Published:

  • DOI: https://doi.org/10.1186/1471-2105-16-S15-P10

Keywords

  • Data Visualization
  • Authoring Tool
  • Clinical Trial Enrollment
  • Scalable Vector Graphic
  • Sophisticated Software