Tag: line chart

Creating human-readable scales for data visualization in charts.

If you ever had the task to generate a graphic from scratch, then you probably encountered this problem: how do we pick a "round" number for the maximum range of the graphic which will fit all of our data nicely?

Here's an example. Your app has a statistics section which displays a line chart of the number of entries versus time. At the beginning, when the number of entries is small - say 6 entries - your graphic could display a range from 0 to 10. But after a while you'll have some hundreds, or even thousands of entries.

A line chart.
Here's an example of a line chart with a range up to 500.
The maximum value in the dataset is 476.

How do you find which is the next "best display range" for any given maximum value <m>m</m>? For a maximum value of 332, which would be better: a range from 0 to 340, 400, 500 or 1000?

In this post, I'll show you how to create a function <m>\mbox{R}(m)</m> that will give you that display range value, and we'll be using logarithms to achieve that.

Continue reading