Visualizing Numerical Lists

Underline doesn’t take away space in a table or a list of data and by varying the length of the underline you can help readers scan much faster and get an idea of the data and its distribution without having to read each number.

Here’s a number of alternatives to display a list of numbers. We have evaluated them in terms of,

1. Reading an individual number
2. Finding the largest and smallest
3. Getting an idea about the distribution

Sorting is the best solution. But it can only be done with a single column list. The following approaches are for multi-column lists where the list is sorted by a different column (different from the column we are trying to visualize).

List #

The simplest and often the best way to show a list of number is to simply list them.

[Forestpin Lite](//vpj.github.io/images/posts/underline/list.png)

However, if the reader is to find the largest value she might have to go through each number, especially if all of them have the same number of digits.

Bars #

Adding a bar, like a horizontal bar chart, helps you clearly identify the largest value, as well as get an understanding of the distribution without having to go through the numbers.

[Forestpin Lite](//vpj.github.io/images/posts/underline/bars.png)

But it’s taking up a lot of space - at least another column width or more if you want to make it aesthetically pleasing. Another problem is that it might distract someone trying to read through the numbers; of course, choosing a more subtle color will help in that.

Displaying text over bars reduces the space, but it makes it lot harder to read the numbers.

[Forestpin Lite](//vpj.github.io/images/posts/underline/bars-text.png)

Underline #

[Forestpin Lite](//vpj.github.io/images/posts/underline/underline-left.png)

Decreasing the height of the bar to a few pixels, or even a single pixel can still give the same effect as bars. Also, you can place them underneath the numbers so that it doesn’t take up an extra column.

[Forestpin Lite](//vpj.github.io/images/posts/underline/underline.png)

Right aligning the bars takes away the cluttered feeling. Again, choosing a more subtle color and/or reducing the thickness of the lines will help reduce distraction when reading numbers

The scale could be linear or logarithmic. A small axis could be placed at the column headings.