With simplicity and accessibility in mind, it is implemented as a one-page, client-only, web-based application without the server-side component, available online at https://baohongz.github.io/bioInfograph. Written in plain JavaScript language, bioInfograph takes advantage of open-source JavaScript libraries including common ones like jQuery, bootstrap, and lodash. As shown in Figure 3A, other special JavaScript libraries are listed under each of three functional modules, “Upload images,” “Layout images,” and “Save HTML,” to show the design of the software. First, dropzone.js makes it easy to upload or drag and drop image files to the tool. The content of uploaded or dropped files will be put on the canvas for layout. The source code in the library is modified to allow emitting “previewReady” status when an image is fully loaded into memory and displayed in the preview box; see https://bit.ly/3Gup4Zp for details. Second, gridstack.js is used to layout draggable, resizable, responsive bootstrap-friendly panels in a grid on the designing canvas. Each panel in the grid holds one image that can be panned or zoomed in and out by attached control provided by svg-pan-zoom.js. Modifications are made in gridstack.js to preserve inline styles, including positions, size, and z-index in order to drag a panel to an accurate location instead of pre-defined stops; see https://bit.ly/3CaOg3T for details. Functions of tinymce.js and svg-inject.js libraries are discussed in the following related sections. Third, FileSaver.js is utilized to save image content and associated metadata about size, position, opacity, and zoom scale in an HTML file. When taken together, an intuitive user interface is built and shown in action as illustrated in Figure 3B, where control elements are located at the top, functional modules in the middle, and a movable, dynamically resizable canvas at the bottom. A very basic workflow is outlined by numbered callout boxes consisting of five steps: 1) uploading images; 2) adding pan-zoom control to fine-tune image size and position; 3) adding labels; 4) saving the work as an HTML file; and 5) printing as PDF. While not required in the minimal setting, all other un-numbered boxes highlight important features to smooth the design process, such as moving the canvas up to create more working space, changing the size of an individual panel, dropping a panel to a trash bin, and adding text box for typing paragraphs of text with spell checking. Due to the space limitation of the figure, some features are discussed in more detail below.

Besides online access, users can install it as a desktop app by downloading the html page or creating a shortcut of the page on the desktop by following the instruction in GitHub repo, https://bit.ly/3wTxoxk. To be aware, the tool is fully tested in the Chrome browser, which provides the best experience.

Regular characters plus built-in Emoji and symbols from Chrome browser can be typed in the title of a plot, which can be fully formatted in various font families, styles, sizes, shades, and colors by using an integrated text editor, TinyMCE (https://www.tiny.cloud). Moreover, resizable text boxes can be placed freely on the canvas to input paragraphs of text by following the instructions in Figure 4. The markdown language has gained popularity in authoring simple documents especially within R and GitHub communities. A very simple markdown processor is enabled by using tinymce’s text pattern plugin that matches the following patterns (source code block from index.html) in the text and applies corresponding formats on these patterns; e.g., “*test*” will become “test” in the editor.

textpattern_patterns: [

{start: '*', end: '*', format: 'italic'},

{start: '**', end: '**', format: 'bold'},

{start: '#', format: 'h1'},

{start: '##', format: 'h2'},

{start: '###', format: 'h3'},

{start: '####', format: 'h4'},

{start: '#####', format: 'h5'},

{start: '######', format: 'h6'},

{start: '1. ', cmd: 'InsertOrderedList'},

{start: '* ', cmd: 'InsertUnorderedList'},

{start: '- ', cmd: 'InsertUnorderedList'}

],

Besides the SVG format, bioInfograph accepts directly additional popular image formats including png, gif, and jpg as input. For other formats like tiff or pdf, free tools such as Inkscape (https://inkscape.org) (Bah, 2007) or pdf2svg (https://bit.ly/2NVtj6E) can be utilized to convert these to one of the acceptable formats, preferably SVG.

Since stylesheet definitions in SVG files are always applied globally to style elements, they share the same parse tree when multiple inline SVGs are embedded in a single document. Therefore, style overwriting and component id collisions can occur and upset the rendering in canvasDesigner as shown in Supplementary Figure S1. To overcome these shortcomings, bioInfograph automatically converts global definitions into inline styles embedded in each targeting element individually, stores it locally, and then removes these definitions from the global scope to solve the overwriting issue. Then, it utilizes a modified version of svg-inject.js (see https://bit.ly/3Gus3kz for details) to make ids in the document unique by appending original ids with a suffix in the form of “--inject-X”, where X is a running number that is incremented with each added SVG image.

Each image is associated with a vertically stacked control button. Desired vertical stacking order (z-index) is attainable by moving these control buttons up or down by mouse as demonstrated in Figure 5, which provides an additional dimension for creative design that often requires overlapped images in a certain order.

The white background in the SVG file is optionally removable to make it transparent so that plots can be overlaid onto each other to create appealing art. Opacities of individual images can be adjusted granularly as well to make a comprehensive effect of overlaid images as showcased in visualizing spatial transcriptomics data, which is displayed in Figure 6. In this use case, vertical stacking of gene expression data on top of histopathology images or vice versa with adjustable transparency is a crucial visualization capability to investigate the relationship between the transcriptional signals and disease pathology.

The finished work can be saved as a self-contained HTML file with necessary JavaScript code embedded for easy sharing by email or hosting at GitHub-like services as exemplified at https://bit.ly/39ClQnD. An individual plot can be enlarged and further zoomed in to view details in high resolution by clicking on the plot and then the button with a plus sign in the popup window. Unique to this HTML presentation, links to detailed information of proteins in UniProt database (The UniProt Consortium, 2021) are active in panel A of the interactive figure as shown in Figure 7. Therefore, bioInfograph output can act as an information portal beyond mere pictures by embedding links to dissipated computational biology resources in SVG figures. Meanwhile, the saved HTML file also serves as a session file that can be loaded back into the tool to restore the work for further modification.