BioInfograph: An Online Tool to Design and Display Multi-Panel Scientific Figure Interactively

Many fit-for-purpose bioinformatics tools generate plots to interpret complex biological data and illustrate findings. However, assembling individual plots in different formats from various sources into one high-resolution figure in the desired layout requires mastery of commercial tools or even programming skills. In addition, it is a time-consuming and sometimes frustrating process even for a computationally savvy scientist who frequently takes a trial-and-error iterative approach to get satisfactory results. To address the challenge, we developed bioInfograph, a web-based tool that allows users to interactively arrange high-resolution images in diversified formats, mainly Scalable Vector Graphics (SVG), to produce one multi-panel publication-quality composite figure in both PDF and HTML formats in a user-friendly manner, requiring no programming skills. It solves stylesheet conflicts of coexisting SVG plots, integrates a rich-text editor, and allows creative design by providing advanced functionalities like image transparency, controlled vertical stacking of plots, versatile image formats, and layout templates. To highlight, the sharable interactive HTML output with zoom-in function is a unique feature not seen in any other similar tools. In the end, we make the online tool publicly available at https://baohongz.github.io/bioInfograph while releasing the source code at https://github.com/baohongz/bioInfograph under MIT open-source license.

Evaluating Scalable Vector Graphics for Software Visualisation

<p>Software visualisation employs various representations of software to help programmersbetter understand program code. However, there are many technologiesthat can be used to deliver software visualisations. These different software visualisationmedia have varying capabilities, and determining which medium isbest suited for a particular software visualisation application can be a complextask. To this end, this thesis presents a principled model for evaluating softwarevisualisation media. This model is then applied in the evaluation of the new“Scalable Vector Graphics” (SVG) standard, to determine if it is suited for use ina developing web-based software visualisation architecture. While the evaluationfinds that SVG can realise a broad range of software visualisations, it is clear thatit falls short in making the development of software visualisations as easy as itcould. This thesis presents a way forward for creating complex software visualisationswith SVG through the development of a domain-specific SVG library. Thefoundation for this library is illustrated and discussed.</p>

Evaluating Scalable Vector Graphics for Software Visualisation

<p>Software visualisation employs various representations of software to help programmersbetter understand program code. However, there are many technologiesthat can be used to deliver software visualisations. These different software visualisationmedia have varying capabilities, and determining which medium isbest suited for a particular software visualisation application can be a complextask. To this end, this thesis presents a principled model for evaluating softwarevisualisation media. This model is then applied in the evaluation of the new“Scalable Vector Graphics” (SVG) standard, to determine if it is suited for use ina developing web-based software visualisation architecture. While the evaluationfinds that SVG can realise a broad range of software visualisations, it is clear thatit falls short in making the development of software visualisations as easy as itcould. This thesis presents a way forward for creating complex software visualisationswith SVG through the development of a domain-specific SVG library. Thefoundation for this library is illustrated and discussed.</p>

Akurasi Presentasi Web dengan Animasi Scalable Vector Graphics: Studi Kasus Animasi Pembelajaran Komunikasi bagi Anak Autis

In recent years, the use of the Web to quickly and efficiently run behavioral and social experiments has grown in popularity. However, there are still revenue differences related to the use of the Web for animation and multimedia. The analysis and accuracy of the use of web technology have been widely studied to update evidence on the accuracy and precession of presenting animation using the Web, as well as expanding research related to accuracy and precision in the presentation of multimedia and animation based on HTML5 technology, especially the use of scalable vector graphics (SVG). Presentation of visual content using web technology can be accepted with increasing accuracy and precision, although this technology needs consideration in some cases in its use. Accuracy and precision using CSS technology which is part of HTML, are the best alternatives for animation. The animation interval is above 50 milliseconds based on test results, while testing using SVG also shows results that are not much different from using CSS in animation. The performance of procedural web technology with HTML5 standards (CSS, SVG, and WebGL) is not much different from the analyzed web technology, with an average missed frame between 0.06 and 1.50 with a standard deviation between 0.252 and 1.055. This technology is becoming the standard and has a promising future, making its use more advisable than other technologies on the decline.

PORTABILITY OF CARTOGRAPHIC SYMBOLS LIBRARY FOR OPEN STANDARDS

The Geological Survey of Brazil has a library of palaeontology symbols to use in geological mapping works, currently in bitmap format and adapted for ESRI platform. This type of representation has presented anti-aliasing problems when reduced, in addition to not being suitable for map presentation on the web, according to OGC (Open Geospatial Consortium) specifications. This work presents a reproducible method in any symbol library type. The method consists of converting the symbol library to open-source format, resulting an OpenType font file, which can be installed on any operating system and view each symbol font in any software that has this functionality, such as a GIS (Geographic Information Systems) software. The need to develop font construction technique is due to improving typographic quality of cartographic representations and making library compatible with main GIS softwares. Those 61 pictorial palaeontology symbols were converted, one by one, to SVG (Scalable Vector Graphics) format. We imported each symbol as a glyph in FontForge font editor. Major computer platforms use OpenType format due to its wide availability and typographic flexibility, including provisions to deal with diverse characteristics of internationally symbolic alphabet systems. There is even the possibility of symbols standardizing in the UTF-8 alphabet system, an issue for the scientific community to study. The advantage of using the SVG format is its size, a compact text file, and has an excellent compression factor. In addition, version-control repositories, like GitHub, can store SVG files, which would facilitate content management. The adopted method proved to be applicable to any cartographic symbols library with good results. Rendering tests on different platforms (web or desktop) showed no noticeable differences. One of the most important aspects of the method presented in this work was to make cartographic symbols library public and open-source for use by the geoscientific community, regardless whether an open-source or proprietary platform is used, and so, the Geological Survey of Brazil will be able to distribute geological symbology patterns, according to Open Data definition.

Color2Hatch: conversion of color to hatching for low-cost printing

In this paper, we propose Color2Hatch, a decolorization method for business/presentation graphics. In Color2Hatch, each region represented as a closed path and uniformly colored in scalable vector graphics (SVG) is converted to a region hatched in black and white. From the characteristics of business graphics, the hatching patterns are designed to represent mainly the hue in the region; additionally, lightness and saturation can also be reflected. To discriminate subtle differences between colors, attached short line segments, zigzag lines, and wave lines are used in hatching by analogy to a clock. Compared with the existing decolorization methods, for example, grayscale conversion and texturing, our method is superior in the discrimination of regions, suitable for low-cost black and white printing that meets real-world needs.

Interactive SARS-CoV-2 mutation timemaps

As the year 2020 came to a close, several new strains have been reported of the severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2), the agent responsible for the coronavirus disease 2019 (COVID-19) pandemic that has afflicted us all this past year. However, it is difficult to comprehend the scale, in sequence space, geographical location and time, at which SARS-CoV-2 mutates and evolves in its human hosts. To get an appreciation for the rapid evolution of the coronavirus, we built interactive scalable vector graphics maps that show daily nucleotide variations in genomes from the six most populated continents compared to that of the initial, ground-zero SARS-CoV-2 isolate sequenced at the beginning of the pandemic. Availability: The tool used to perform the reported mutation analysis results, ntEdit, is available from GitHub. Genome mutation reports are available for download from BCGSC. Mutation time maps are available from https://bcgsc.github.io/SARS2/.

Interactive SARS-CoV-2 mutation timemaps

As the year 2020 came to a close, several new strains have been reported of the severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2), the agent responsible for the coronavirus disease 2019 (COVID-19) pandemic that has afflicted us all this past year. However, it is difficult to comprehend the scale, in sequence space, geographical location and time, at which SARS-CoV-2 mutates and evolves in its human hosts. To get an appreciation for the rapid evolution of the coronavirus, we built interactive scalable vector graphics maps that show daily nucleotide variations in genomes from the six most populated continents compared to that of the initial, ground-zero SARS-CoV-2 isolate sequenced at the beginning of the year. Availability: The tool used to perform the reported mutation analysis results, ntEdit, is available from GitHub. Genome mutation reports are available for download from BCGSC. Mutation time maps are available from https://bcgsc.github.io/SARS2/.

Scalable Scalable Vector Graphics: Automatic Translation of Interactive SVGs to a Multithread VDOM for Fast Rendering

The dominant markup language for Web visualizations - Scalable Vector Graphics (SVG) - is comparatively easy to learn, and is open, accessible, customizable via CSS, and searchable via the DOM, with easy interaction handling and debugging. Because these attributes allow visualization creators to focus on design on implementation details, tools built on top of SVG, such as D3.js, are essential to the visualization community. However, slow SVG rendering can limit designs by effectively capping the number of on-screen data points, and this can force visualization creators to switch to Canvas or WebGL. These are less flexible (e.g., no search or styling via CSS), and harder to learn.We introduce Scalable Scalable Vector Graphics (SSVG) to reduce these limitations and allow complex and smooth visualizations to be created with SVG.SSVG automatically translates interactive SVG visualizations into a dynamic virtual DOM (VDOM) to bypass the browser's slow `to specification' rendering by intercepting JavaScript function calls. De-coupling the SVG visualization specification from SVG rendering, and obtaining a dynamic VDOM, creates flexibility and opportunity for visualization system research. SSVG uses this flexibility to free up the main thread for more interactivity and renders the visualization with Canvas or WebGL on a web worker. Together, these concepts create a drop-in JavaScript library which can improve rendering performance by 3-9X with only one line of code added.To demonstrate applicability, we describe the use of SSVG on multiple example visualizations including published visualization research. A free copy of this paper, collected data, and source code are available as open science at osf.io/ge8wp.