Colin Rutland

Visualizing hierarchical data with the hyperbolic tree widget

About hyperbolic tree

In a previous post I explained how the Bullet Graph and Sparkline widgets can help dashboard designers use valuable screen real-estate more economically. These charts are ideal for displaying single values and simple sequences of values. But a different set of problems arises when hierarchical data needs to be displayed, as users need to visualize not just the information relating to each individual node, but also the existence (and possibly the nature) of the relationships between nodes.

NetNow provides a wide range of widgets for displaying hierarchical data including trees, tree grids (such as the service summary) and multi-level pie charts. All of these are useful visualizations, but can become cluttered with very large trees.

A Hyperbolic Tree (or “Hypertree”) overcomes this limitation by reducing the screen space used to display nodes exponentially as the distance from the centre of the chart increases. This means that a Hypertree can pack much more information into the same amount of space than a standard tree graph:

The NetNow Hypertree widget enables easy navigation of very large hierarchies of nodes. Clicking on any node brings it immediately to the centre of the chart, automatically reducing the scale of surrounding nodes that are not the user’s current focus of attention.

The use of hyperbolic trees as a browsing mechanism for large hierarchies of data was pioneered by John Lamping, Ramana Rao and Peter Pirolli and is described in more detail in their original paper.

Colin Rutland

Bullet Graphs and Sparklines

Get your message across in a small space with Bullet Graphs

The NetNow dashboard builder provides a wide variety of graphical components (or “widgets”) that allow users to present their data in intuitive and visually rich ways. In this article I’m going to introduce you to a couple of lesser-known widgets that are particularly handy for packing information into a tight space on a screen or other display medium.

Although many NetNow widgets will be familiar to the user, being essentially electronic versions of traditional paper-based or mechanical indicators such as pie charts, thermometers and angular gauges, a few have been designed specifically for modern media. Of these, perhaps the most generally useful are the Bullet Graph and the Sparkline.

Bullet Graph

The Bullet Graph was designed by Stephen Few, a specialist in data visualization technology. Few describes the Bullet Graph as “a rich display of data in a small space” that “tells you not only how far along you are on the path to the future target, but also how well you’re doing today in relation to that target”.

As well as being a very efficient means of visualizing information, Bullet Graphs are also more accessible to users affected by colour blindness than traditional “red, amber, green” type displays. A full description of the attributes of the Bullet Graph can be found on Few’s web site.

Sparkline

Sparklines were invented by author and lecturer Edward Tufte, who describes them as “data-intense, design-simple, word-sized graphics”. The following example demonstrates how a Sparkline can allow the essential attributes of a set of data to be visualized at a single glance, without confusing the reader with unnecessary detail:

More information on Sparklines can be found on Tufte’s web site. Edward Tufte is a prolific author on the subject of data visualization and I can highly recommend his best-known book The Visual Display of Quantitative Information, which was named as one of the 100 best books of the 20th century by amazon.com.

The Bullet Graph and the Sparkline are just two of the many graphical components available in the NetNow user interface builder, but I hope that this article has demonstrated how useful they can be in getting your message across while making the best use of valuable screen real estate.

Colin Rutland

HTML 5 takes the internet by storm

html5 vs flash performance

It was fascinating to see that the third most popular news story on the BBC News website this morning concerned the rapid expansion in popularity of the HTML 5 language in web design: Coding the future: HTML 5 takes the internet by storm.

Although surely only a tiny minority of the BBC’s readers will ever deal directly with the intricacies of the language itself, HTML5 promises to have a massive impact on users’ experience of browsing the web. Before the advent of HTML 5, websites that offered sophisticated graphical content (for example, films or animations) had to rely on inconvenient third-party browser plugins such as Adobe Flash or QuickTime.

Although Flash has historically been a very successful technology, it has some major limitations. It does not run in all browsers — most notably Apple products including the iPad and iPhone — and it requires the user to explicitly consent to the installation of the Flash plugin. With HTML5 there will finally be a universal method for drawing sophisticated graphics built into every standards-compliant browser.

But as the BBC article explains, the impact of HTML 5 is not purely technological; it also has strong commercial advantages:

“Put simply it means that there’s now much less chance that customers visiting a website will come across a black hole in the middle of the page, or get endless prompts to ‘download a plug-in’ which may take several minutes to install. By then it is often too late. The consumer has already clicked on a competitor’s website.”

At NetNow we have carefully tracked the progress of HTML 5 and the ever-increasing support for the language in market-leading browsers such as Internet Explorer 9, Chrome, Safari, Firefox and Opera. We believe that the future of graphically-rich web applications such as NetNow lies with HTML5, as it will allow us to make our innovative visualization technology available on the widest range of application platforms from high-spec PCs to phones and tablets.

For these reasons, we designed HTML 5 into our products from day one. We hope you’ll agree that the NetNow Dashboard looks just as great on an iPhone or iPad as it does on a PC!