Smoke Plots

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

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?

SmokePlot_ExcelKmMonthThis 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.

SmokePlot_ExcelMilesGallonThis 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.

SmokePlot_DslReports

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

With a teensy bit of research, I found that the html canvas element would work in a pinch. A bit of javascript to plot some transparent rectangles and a tiny web page got me what I wanted!

 SmokePlot_MilesPerGallonNew

SmokePlot_MilesPerGallonNewClumpy

(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.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail