A Fancy jQuery Gauge fer Global Footprint Network - Hop Studios

Cap'n's log

A Fancy jQuery Gauge fer Global Footprint Network

Global Footprint Network Gauge

Here’s a fun little project we did recently: creatin' an interactive needle, dial and slider, t' display some important and dense data in an novel way fer th' Global Footprint Network, a nonprofit organization established t' enable a sustainable future.

We be given, on th' one hand, a really nice vector design fer how this gauge (dial) should work, and on th' other hand, an Excel sheet wi' environmental factors broken down in various numerical ways by year, and we be told: “Make it work!”

Beyond th' general need t' get it animatin' properly and smoothly, th' biggest hurdle we had on this project be t' develop this tool without usin' Flash, so that readers comin' t' this site on their mobile devices (specifically ones that dern't have Flash support) would still be able t' view th' gauge and interact wi' it. We chose jQuery, jQuery UI and jGauge t' form th' base o' th' meter and its core functionality. In addition, th' “digital LCD” typeface uses Cufon, a tool which lets ye use fancier, non-Web standard fonts without needin' t' make them into rasterized graphics . T' wrap it all up in a nice package, some advanced CSS be used t' design and customize each element t' match th' static design collateral.

Th' lovely little touches (changin' colors, smooth rotation) make this one o' our favorite small projects lately. Try it out!


Have a Project fer Us?

Get in Touch