

Donuts.css - nostalgiaz
http://www.larentis.eu/donuts/

======
joshwa
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:

[http://www.perceptualedge.com/articles/Whitepapers/Dashboard...](http://www.perceptualedge.com/articles/Whitepapers/Dashboard_Design.pdf)

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.

~~~
niggler
Is it an historical anomaly that gauges were/are used to display car
information (velocity, rpm, remaining fuel, mpg)?

~~~
GuiA
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.

------
phinnaeus
Calling it Donuts.css kind of implies its done in CSS exclusively.

~~~
bbx
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.

~~~
beefsack
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.

~~~
tlrobinson
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.

EDIT: here's a "pure CSS" version: <http://codepen.io/tlrobinson/pen/aGvrF>

------
dangrossman
I'm pretty happy with gauge.js for this kind of widget:
<http://bernii.github.com/gauge.js/>

~~~
signed0
One difference between the two: guage.js is pixelated on a retina display,
Donuts.css is crisp.

~~~
Wingman4l7
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.

------
tlrobinson
"Pure" CSS version: <http://codepen.io/tlrobinson/pen/aGvrF>

It generates a rule for each percentage value, so it's not very efficient.
Only supports integral percentages.

~~~
_ZeD_
just add a 'transform' under the '-webkit-transform' and it works on ff

------
fredley
This is great, and perfect for a project I am working on. Pity the name is not
representative.

------
EzGraphs
And to see them move - in a Chrome console:

$('.donut-arrow').attr('style','-webkit-transform: rotate(85deg)')

------
csense
Apparently it uses CSS rotate() for the rendering. I'll have to remember that
trick.

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

------
bluetidepro
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! :)

------
sergiotapia
Blocked. Anyone have mirror?

~~~
mintplant
Does this work for you?

<http://archive.is/BlN2K>

------
peachananr
Looks like a very customizable widget. :)

------
tomhschmidt
Leaving the Yoda at the end of the impress.js demo is pretty lame, especially
considering you didn't write it.

