Start Submission Become a Reviewer

Reading: A Figure One Web Tool for Visualization of Experimental Designs


A- A+
Alt. Display

Software Metapapers

A Figure One Web Tool for Visualization of Experimental Designs


Foo Cheung ,

X close

The CHI Consortium

NIH (Yuri Kotliarov, Julián Candia, Katherine Stagliano, Angélique Biancotto and John S. Tsang), US
X close


This manuscript introduces a user-friendly, point and click open source and platform-independent software tool that aids the graphical representation of experimental studies. A graphical summary can give a high-level view of a study and represent in one illustration the important features of the data. Examples include sample collections, the time of each data collection, perturbations, and analysis performed. Graphical summaries can be useful in clarifying and documenting the complex relationships within an experiment by breaking down the component parts and expressing them visually. Commonly used cases for this tool include generating summary figures for presentation and publications. This tool was used either alone or in conjunction with other tools to generate schematic diagrams for talks and publications on several different on-going research projects.


Funding statement: This research was supported by the Intramural Research Program of the NIH, NIAID and CHI.

How to Cite: Cheung, F. and Consortium, T.C., 2020. A Figure One Web Tool for Visualization of Experimental Designs. Journal of Open Research Software, 8(1), p.6. DOI:
  Published on 30 Mar 2020
 Accepted on 08 Mar 2020            Submitted on 03 Aug 2018

(1) Overview


Experimental designs can be both complex and time-consuming. However, they provide useful information by improving transparency and documenting key experimental steps such as the collecting and the analysis of large datasets using different tests over time where subjects or animals are exposed to certain treatments [1, 2, 3, 4].

Currently, there is a variety of drawing programs that can be used to draw diagrams, including Gimp (, Inkscape (, PowerPoint ( and TikZ (

Experimental studies involving multiple tests, perturbation (disturbance on the biological system that causes it to change e.g.: Vaccination) and timepoints (points in time) can be complex and error prone to follow without the aid of an experimental design. We have seen a need for a web tool that can quickly generate schematic diagrams in a point and click manner. Here we present such a tool that avoids time-consuming tasks like drawing circles or arrows using primitive tools. This tool has already been successfully used to generate numerous experimental designs from several on-going research projects.

Although there is a minimal learning curve and an investment in development time, this tool was created with the aim of being easy to use, highly portable and containing useful features. There is not a method to hand-draw shapes, this tool is focused on specifying the exact locations of text (e.g.: labels, Timepoints, titles etc), lines, arrows and shapes by selecting coordinates. There is no programming functionality but the user is able to run loops that creates a series of lines, arrows, shapes with a varying parameter by selecting x-coordinates (time points) and y-coordinates.

The first step towards creating an experimental design requires the user to decide on whether to start from scratch or from one of the available templates.

Creating a Diagram

There are several options available in order to create a schematic of an experimental design. The first method involves using a pre-existing template, and second method involves using a blank canvas.

Using a Template

Our tool allows a user to create a diagram based on a pre-existing template (Figure 1), then edit and add your own content which can save time and effort. The user can start a new diagram by editing an existing template, which consists of a URL that specifies the styles, settings, and layouts. The template can also serve as a useful reminder on how to create certain designs. Custom templates can be created by copying the URLs which then can be saved, reused and shared with collaborators. A selection of templates is available on the landing page. Click on the template link above each template that you would like to open and then navigate to the template window on your computer. Once the web page loads, the user would click the ‘Draw Figure!’ button to generate the visualization and then start editing. It is unlikely that you will find a template that precisely matches your needs, but you can select the closest fit and then modify it.

Figure 1 

Creating a diagram based upon a pre-existing template.

Creating a Blank Canvas

The user starts by setting up the initial scope of the framework by selecting the total number of time points. Once the time points are selected the user can browse a library of shapes. The shapes and coordinates now represent the relationships between key steps such as the blood draws, time points, vaccinations, medication, transcriptomics, proteomics, etc. The first step requires the user to select and click on the ‘Draw from Scratch’ button or link to start a new visualization. Click on the button ‘Draw Figure!’ to create a blank canvas with a placeholder for the title, sub-title, captions, timepoints, x and y labels as shown in Figure 2, default values for Timepoints are initially set to ten Timepoints.

Figure 2 

Creating a diagram from scratch.

Creating Content

Users can select the number of timepoints or columns with the central slider. If a user needs to make adjustments, they can add or delete timepoints by moving and adjusting the slider.

Titles and labels can be added to the canvas by completing the automatically generated text boxes, found within the navigation side bar or remove the default text to leave it blank.

Click on ‘Add Item’ to add content. The user can place multiple shapes, icons and images by specifying precise coordinates which will reflect the locations across columns and rows on the canvas. Content can include different colours and sizes of arrows, circles, boxes, images, icons and rectangles. Rows and column coordinates will decide the location of content on a canvas and pressing the button ‘Draw Figure!’ will update the diagram.

Proof of Concept

As proof of concept we used the web tool to create a schematic diagram based on an actual experimental design for a clinical trial as shown in Figure 3.

Figure 3 

An example of a diagram output.

Output As PDF

Click on the “Output Plot To PDF” and follow the download link to a high resolution of your illustration.

Bookmark and Helpful Hints

The best way to avoid losing work is to save the URL early and save often. The bookmark feature allows the user to recreate the diagram from the URL and enables sharing with collaborators. We also implemented a dynamic interactive help system by clicking on the “Press for instruction button” which will then walk through and explain each feature.

Implementation and architecture

This web application is written using the shiny framework [5], a package from RStudio that can be used to build interactive web pages with R [6]. The code is split into two parts, (1) the user interface and (2) the server-side containing the logic. Numerous R packages were used including shinydashboard [7], ggplot2 [8]. See code for complete list.

Quality control

The software has been through several rounds of functional and usability testing. Each feature is tested by typing the input and examining the output making sure it operates according to the requirement specification. Usability testing was carried out by user feedback and manually checking completed diagrams. We have successfully created numerous diagrams with this tool to date. Support through this web tool is by feedback, bug reports and feature wishes from numerous users. The application runs in most modern web browsers, including Google Chrome, Safari, Firefox, and IE10+ and several operating systems, including Windows, Mac, Linux and Chrome.

(2) Availability

Operating system

A platform-independent software package, compatible with modern web browsers (IE10+, Google Chrome, Firefox, Safari, etc.).

Programming language


Additional system requirements



Imports a number of R packages (see code for most up-to-date list).


We expect that most users will use the web tool directly from the website but users can also install this web tool from source code if required.

List of contributors


Software location

Code repository

Name: GitHub


License: Apache

Date published: 08/02/2018



(3) Reuse potential

As a standalone program, this web tool provides researchers with a way to draw experimental designs or summaries which in an intuitive, ‘clickable’ manner. This program has a high reuse potential “as is” and has already been a useful tool for several clinical projects from a wide spectrum of biology regardless of coding experience.

Competing Interests

The authors have no competing interests to declare.


  1. Nakaya, HI, Hagan, T, Duraisingham, SS, Lee, EK, Kwissa, M, Rouphael, N, Frasca, D, Gersten, M, Mehta, AK, Gaujoux, R, Li, GM, Gupta, S, Ahmed, R, Mulligan, MJ, Shen-Orr, S, Blomberg, BB, Subramaniam, S and Pulendran, B 2015 Dec 15 Systems Analysis of Immunity to Influenza Vaccination across Multiple Years and in Diverse Populations Reveals Shared Molecular Signatures. Immunity, 43(6): 1186–98. DOI: 

  2. Kazmin, D, Nakaya, HI, Lee, EK, Johnson, MJ, van der Most, R, van den Berg, RA, Ballou, WR, Jongert, E, Wille-Reece, U, Ockenhouse, C, Aderem, A, Zak, DE, Sadoff, J, Hendriks, J, Wrammert, J, Ahmed, R and Pulendran, B 2017 Feb 28 Systems analysis of protective Immune responses to RTS, S malaria vaccination in humans. Proc Natl Acad Sci USA, 114(9): 2425–2430. DOI: 

  3. Sobolev, O, Binda, E, O’Farrell, S, Lorenc, A, Pradines, J, Huang, Y, Duffner, J, Schulz, R, Cason, J, Zambon, M, Malim, MH, Peakman, M, Cope, A, Capila, I, Kaundinya, GV and Hayday, AC 2016 Feb Adjuvanted influenza-H1N1 vaccination reveals lymphoid signatures of age-dependent early responses and of clinical adverse events. Nat Immunol, 17(2): 204–13. DOI: 

  4. Tsang, JS, Schwartzberg, PL, Kotliarov, Y, Biancotto, A, Xie, Z, Germain, RN, Wang, E, Olnes, MJ, Narayanan, M, Golding, H, Moir, S, Dickler, HB, Perl, S, Cheung, F and Baylor HIPC Center; CHI Consortium 2014 Apr 10 Global analyses of human immune variation reveal baseline predictors of postvaccination responses. Cell, 157(2): 499–513. DOI: 

  5. Chang, W, Cheng, J, Allaire, J, Xie, Y and McPherson, J 2015 Shiny: Web Application Framework for R. R package version 0.11.1. 

  6. R Core Team 2014 R: A language and environment for statistical computing. Vienna, Austria: R Foundation for Statistical Computing. URL: 

  7. Chang, W 2016 shinydashboard: Create Dash boards with ‘Shiny’. R package version 0.5.3. 

  8. Wickham, H and Chang, W 2016 ggplot2: Create Elegant Data Visualisations Using the Grammar of Graphics. R package version 2.2.1. 

comments powered by Disqus