d3-gauge.js
function Gauge (el, opts) {
  if (!(this instanceof Gauge)) return new Gauge(el, opts);

  this._el = el;

  this._opts = xtend(defaultOpts, opts);  

  this._size   =  this._opts.size;
  this._radius =  this._size * 0.9 / 2;

  this._cx     =  this._size / 2;
  this._cy     =  this._cx;

  this._preserveAspectRatio = this._opts.preserveAspectRatio;

  this._min    =  this._opts.min;
  this._max    =  this._opts.max;
  this._range  =  this._max - this._min;

  this._majorTicks = this._opts.majorTicks;
  this._minorTicks = this._opts.minorTicks;

  this._needleWidthRatio = this._opts.needleWidthRatio;
  this._needleContainerRadiusRatio = this._opts.needleContainerRadiusRatio;
  
  this._transitionDuration = this._opts.transitionDuration;
  this._label = this._opts.label;

  this._zones = this._opts.zones || [];

  this._clazz = opts.clazz;

  this._initZones();
  this._render();
}
function Gauge (el, opts) {
  if (!(this instanceof Gauge)) return new Gauge(el, opts);

  this._el = el;

  this._opts = xtend(defaultOpts, opts);  

  this._size   =  this._opts.size;
  this._radius =  this._size * 0.9 / 2;

  this._cx     =  this._size / 2;
  this._cy     =  this._cx;

  this._preserveAspectRatio = this._opts.preserveAspectRatio;

  this._min    =  this._opts.min;
  this._max    =  this._opts.max;
  this._range  =  this._max - this._min;

  this._majorTicks = this._opts.majorTicks;
  this._minorTicks = this._opts.minorTicks;

  this._needleWidthRatio = this._opts.needleWidthRatio;
  this._needleContainerRadiusRatio = this._opts.needleContainerRadiusRatio;
  
  this._transitionDuration = this._opts.transitionDuration;
  this._label = this._opts.label;

  this._zones = this._opts.zones || [];

  this._clazz = opts.clazz;

  this._initZones();
  this._render();
}
function Gauge ( el , opts ) { if ( ! ( this instanceof Gauge ) ) return new Gauge ( el , opts ) ; this . _el = el ; this . _opts = xtend ( defaultOpts , opts ) ; this . _size = this . _opts . size ; this . _radius = this . _size * 0.9 / 2 ; this . _cx = this . _size / 2 ; this . _cy = this . _cx ; this . _preserveAspectRatio = this . _opts . preserveAspectRatio ; this . _min = this . _opts . min ; this . _max = this . _opts . max ; this . _range = this . _max - this . _min ; this . _majorTicks = this . _opts . majorTicks ; this . _minorTicks = this . _opts . minorTicks ; this . _needleWidthRatio = this . _opts . needleWidthRatio ; this . _needleContainerRadiusRatio = this . _opts . needleContainerRadiusRatio ; this . _transitionDuration = this . _opts . transitionDuration ; this . _label = this . _opts . label ; this . _zones = this . _opts . zones || [ ] ; this . _clazz = opts . clazz ; this . _initZones ( ) ; this . _render ( ) ; }
Creates a gauge appended to the given DOM element.

Example:

```js
var simpleOpts = {
size :  100
, min  :  0
, max  :  50
, transitionDuration : 500

, label                      :  'label.text'
, minorTicks                 :  4
, majorTicks                 :  5
, needleWidthRatio           :  0.6
, needleContainerRadiusRatio :  0.7

, zones: [
{ clazz: 'yellow-zone', from: 0.73, to: 0.9 }
, { clazz: 'red-zone', from: 0.9, to: 1.0 }
]
}
var gauge = Gauge(document.getElementById('simple-gauge'), simpleOpts);
gauge.write(39);
```

@name Gauge
@function
@param el {DOMElement} to which the gauge is appended
@param opts {Object} gauge configuration with the following properties all of which have sensible defaults:
- label {String} that appears in the top portion of the gauge
- clazz {String} class to apply to the gauge element in order to support custom styling
- size {Number} the over all size (radius) of the gauge
- preserveAspectRatio {String} default 'xMinYMin meet', see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
- min {Number} the minimum value that the gauge measures
- max {Number} the maximum value that the gauge measures
- majorTicks {Number} the number of major ticks to draw
- minorTicks {Number} the number of minor ticks to draw in between two major ticks
- needleWidthRatio {Number} tweaks the gauge's needle width
- needleConatinerRadiusRatio {Number} tweaks the gauge's needle container circumference
- transitionDuration {Number} the time in ms it takes for the needle to move to a new position
- zones {Array[Object]} each with the following properties
- clazz {String} class to apply to the zone element in order to style its fill
- from {Number} between 0 and 1 to determine zone's start
- to {Number} between 0 and 1 to determine zone's end
@return {Object} the gauge with a `write` method
Creates a gauge appended to the given DOM element .