Gauges are actually pretty terrible interfaces for quickly communicating information in a dashboard.
* hard to scan (insufficient contrast between needle and gauge)
* typically don't show labels/values for boundaries
* typically don't show labels/values for scale/units
* typically don't show labels/values for alert thresholds
* even when labels are present, they are still difficult to read quickly
due to lack of alignment
* when displaying multiple gauges of related metrics, you can't visually
compare them without looking closely
Here's a pretty good overview on dashboard design (PDF, sorry) from Stephen Few that includes a good breakdown of why gauges are terrible:
Well, vehicles (planes, cars, trains, etc. all use gauges) use them to display data in a very different way than information dashboards.
If we look at the points OP listed:
* hard to scan (insufficient contrast between needle and gauge)
Gauges in vehicles typically have a high contrast (orange/blue needle on black background)
* typically don't show labels/values for boundaries
Labels for boundaries (and in between values) are present
* typically don't show labels/values for scale/units
Units are given (or are implicit; i.e. for the gas tank gauge, I don't really care about the unit that much– all I care about is a very rough estimate of when I'll have to stop at a gas station)
* typically don't show labels/values for alert thresholds
Alert thresholds are clearly labeled, and they are also rarely reached (it is rarer for the typical car to go over 140 MPH than it is for a web server to encounter a critical level of dropped requests, for example)
* even when labels are present, they are still difficult to read quickly
due to lack of alignment
Labels are legible on vehicle gauges in part because a) there are few of them and b) you know what value interval to expect (i.e. when driving on the highway, my gaze will not start at 0 and go upwards looking for the needle, but rather start instinctively around 60 or so)
* when displaying multiple gauges of related metrics, you can't visually
compare them without looking closely
Metrics tend to be fairly independent (i.e. you only ever really need to interpret one at a time) in vehicles.
I'd say it's an historical anomaly that digital interfaces use gauges to display information (precisely because of vehicles), but in vehicles they actually make a lot of sense.
Gauges are not the "comic sans" of dashboard design; they actually are a fantastic solution for a very specific type of information display problem.
But many digital designers resort to them because we are so much used to them, when there are in fact many other options available when displaying more complex/nuanced information. The book that OP recommended (Information Dashboard Design) is a foundational text in that topic and comes highly recommended.
Yeah, I wish people would stop doing this, especially since almost every example posted here is also tightly coupled to jQuery. It's a cool widget though.
It would be interesting if you could use `calc` and `attr` to do this purely with CSS, but it doesn't seem to be that flexible yet. Ie:
transform: rotate(attr(data-percentage) "deg")
EDIT: Heh, actually, as a Dojo/Python/LESS fan, I'm really not the target for that project! =D
Looking at the code, the design is mostly done in CSS: the obvious border-radius for the circles, :before pseudo-classes for the origin, and rotate transformations along with transitions for the animated arrow. Circle sizes are based upon the css subclass.
The jQuery only sets the colors and the arrows' angle.
Having a tiny bit of JS and having no JS at all is worlds apart. I edited the DOM in my inspector to try to add arrows and change percentages, but nothing happened after I injected new elements.
Had this been entirely in CSS, it would have automatically rendered immediately after modifying the DOM.
It's not really possible to do what you want to do (at least not without generating a CSS rule for every possible percentage value), but you can get damn close by calculating the right rotation (apparently "percent * 1.8 - 90") and setting the "transform" properties yourself.
I can't speak for any of the other features, but gauge also has fancier color "phasing" based on the values -- donuts.css just does red / yellow / green.
If I change data-percentage, the page needs to be rerendered for the arrow to be updated. Needed to change the transform for the arrow to be changed. Didn't expect that since it's a javascript library.
I was hoping it would be a donut made in CSS (mainly because I'm hungry), but I was still quite happy with the results. This is neat, and actually something I was recently looking for! Well done! :)
http://www.perceptualedge.com/articles/Whitepapers/Dashboard...
I can highly recommend Stephen Few's books on dashboard design and data visualization--he's much more focused on real-world applications than Tufte.