Recently I was looking at the data visualizations for tracking the mileage for my Honda Fit… and found them really lacking in getting the information across.
Ugh, how ugly is this?
This chart is supposed to give some insight on how many kilometers are traveled each month to give a sense when I am most active with the car. The only conclusion that I can really draw is that a big trip occurred during September of 2008 (honeymoon!). It is really hard to draw a conclusion from the data presented this way.
This chart is a little better, as it attempts to show where the data points lie and even has limit bars for 1 standard deviation shown. However, I know for a fact that during big trips I get much better mileage (highway driving), but it is really hard to discern from the way the data is presented.
Along came the ‘Smoke Plot’
I stumbled across what dslreports was calling a ‘SmokePing Plot’. It presented the ping times and dropped packets in a really great chart.
Look at this thing – it shows variance, min, max, dropped packets, average all in one plot! I just had to have it for representing the mileage for my car… but I couldn’t find a good library that implemented what I wanted or it was just simply too difficult to get going.
The JS+HTML Take
(bottom axis is the week number; data is clumped in 2 week chunks)
Two different types of the charts are shown, one with a bias towards the average (the first), and the other shows a spread around the point itself (the second). They each show the data in a slightly different way. The first is a bit more clear and visually appealing, where as the second is useful to determine clumping (for instance, in week 44 where a road trip made a clump of data points in the 40 mil/gal range).
Source can be grabbed from GitHub if you want to check it out.