Presenting Scientific Information On The Web

Presenting scientific graphics on the web has always been a challenge. Fortunately, new web technologies simplify the process. For the purposes of this article, graphics include line art and mathematics, such as those found in academic journal articles: charts, diagrams, and maps.

Visual design is important. Web audiences are accustomed to colorful, interactive content. Because readers use visual design to gauge credibility, it should be important to you, too.

Static Graphics On The Web

Documents

Publishing PDF and Word documents is not a good options. In spite of being discouraged for over a decade by usability experts, these techniques are still commonly used. Documents designed for paper target a specific page size; and screens, such as the iPhone, vary from wide to tall. The layout of online content should always adapt to the display.

Flipboard adapts content to the iPad

Embedded Images

HTML is designed to structure text and images for the screen. Graphics, like plots, however, are typically captured in images. Unfortunately, these images don’t always work well.

Common image formats, like JPEG and PNG, store content as pixels that degrade when enlarged. Print publications avoid this issue by creating images at exactly the size at which they will be used. For example, line art in IEEE Transactions must be 600 dpi at the final printed size.

The web is less predictable than print. Web browsers layout and size content according to the users’ hardware and preferences, meaning content creators cannot completely control how the content is displayed. Two web browsers may use different fonts to display a page, making it difficult to avoid inconsistencies with words in an image.

The text and graphics on a page should look like they belong together. Text should match the font, color, size, and spacing of other text. Similarly, lines should have a cohesive size and color. HTML can be easily and consistently styled using style sheets, while images must each be recreated to make modifications.

Dynamic Graphics

The good news is that modern web technologies, namely JavaScript, can generate attractive graphics. Web browsers use JavaScript to render graphics for each visit so that changes to the data are immediately visible without modifications to the graphics. This is much easier than updating spreadsheets, charts, and documents. With a little extra JavaScript, you can even use real-time data feeds so that your content automatically stays current.

Leonhard Euler, blind mathematician

HTML generated by JavaScript overcomes many of the limitations encountered when working with images. Mathematics generated by MathJax enlarge beautifully while images degrade to a Grecian clusterfuck™. Unlike images, these mathematics are accessible to users with disabilities that make reading difficult or impossible. HTML based graphics can be consistently styled with other content.

JavaScript makes interaction easy. For example, Google Maps invite users to explore data; stagnate maps don’t. You’ll likely need to limit interactions that capture too much attention or are not relevant. For example, you may want to allow users to pan and zoom, but disable street maps and terrain that distract from your message.

Getting Started

Interested in using JavaScript to generate graphics? Checkout the following:

These libraries will visualize many ideas, and can be extended with plug-ins.

Storm Search demonstrates how Flot and the Google Map API by visualizing tropical storm data. Notice that hovering over points on either the map or plots will highlight the corresponding points.

tl;dr – generate graphics using JavaScript, rather than using images