Donuts.css

http://www.larentis.eu/donuts/

by nostalgiaz • 13 years ago

114 23 13 years ago

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

phinnaeus• 13 years ago

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

polemic• 13 years ago

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

bbx• 13 years ago

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• 13 years ago

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.

sergiotapia• 13 years ago

Blocked. Anyone have mirror?

mintplant• 13 years ago

Does this work for you?

http://archive.is/BlN2K

fredley• 13 years ago

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

diggan• 13 years ago

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.

csense• 13 years ago

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

dangrossman• 13 years ago

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

signed0• 13 years ago

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

Wingman4l7• 13 years ago

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.

EzGraphs• 13 years ago

And to see them move - in a Chrome console:

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

tomhschmidt• 13 years ago

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

joshwa• 13 years ago

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

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• 13 years ago

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

GuiA• 13 years ago

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.

EastCoastLA• 13 years ago

Any open source code to generate the bullet graph and sparklines? Both make a great visual when looking at this type of data.

tlrobinson2• 13 years ago

"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_• 13 years ago

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

peachananr• 13 years ago

Looks like a very customizable widget. :)

Donuts.css

Related Stories