D3 Gauge Extended Sample

Started with http://tomerdoron.blogspot.com/2011/12/google-style-gauges-using-d3js.html

by mr23

HTML

<span id="dashboardContainer"></span> 
<span id="memoryGaugeContainer"></span>
	<span id="cpuGaugeContainer"></span>
	<span id="networkGaugeContainer"></span>

<br/>
Dim Control
<div id="dimmable" />

CSS

body {
    font: 10px arial;
    background-color:#202040;
    COLOR: grey;
}

JavaScript

// Forked.
    // Rev 0.1: Added Dim selector, and refactored gauge's 'face' into components
    // and sw methods to allow changing color, added a 'size bias' for the gauge
    // size, to allow having some larger than others, and added an interval var
    // allowing an 'initialization' interval and a 'runtime' interval. If interval
    // updates faster than 200ms, it can cause the gauge pointer to distort. This
    // occurs because the line control's 'transition' isn't written to follow a
    // gauge's circular rotation, it simply is a line transition and is allowed to
    // shorten/lengthen. This can be seen after the 'powerup' sweep, when the
    // 'readings' are set to 50 as a starting point.
    // Author is learning D3, SVG, Javascript, JSFiddle etc.
// References:
// http://tomerdoron.blogspot.com/2011/12/google-style-gauges-using-d3js.html
// http://bl.ocks.org/tomerd/1499279
// https://gist.github.com/tomerd/1499279
// Similar:
// http://jsfiddle.net/bsatrom/Fxv5F/38/
// (some) library options:
// http://www.highcharts.com/ (no gauge at this time, has cost)
// http://tenxer.github.io/xcharts/ (no scatter, yet)
// http://demos.kendoui.com/dataviz/dashboards/car-dashboard.html
// http://nvd3.org/livecode/#codemirrorNav (alt to JSFiddle, supps Vim, has scatter)
// http://square.github.io/cubism/, http://square.github.io/cube/. ('live' aka realtime)
// Some from: http://techslides.com/50-javascript-charting-and-graphics-libraries/
    var gauges = [];
    var dashContainer;
    var readings = [];	// pretend readings are supplied (named by gauge).
    var i = 0;
    var interv0 = 0;
    var xDim = 0;

            var greenColor = "#107618";
            var yellowColor = "#FFC900";
            var redColor = "#EC4922";
            var darkColor = "#101010";
            var blueColor = "#1030B0";
            var dimBlueColor = "#101560";
            var lightColor = "#EEEEEE";
	    var greyColor = "303030";
	    var darkGreyColor = "101010";
	    var...