jorgeehernandez/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>
    <script src="liquidFillGauge.js" language="JavaScript"></script>
    <style>
        .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
    </style>
</head>
<body>
<svg id="fillgauge1" width="97%" height="250" ></svg>
<svg id="fillgauge2" width="19%" height="200" onclick="gauge2.update(NewValue());"></svg>

<script language="JavaScript">


    var config1 = liquidFillGaugeDefaultSettings();
    config1.circleThickness = 0.1;
    config1.circleFillGap = 0.1;
    config1.textVertPosition = 0.8;
    config1.waveAnimateTime = 1000;
    config1.waveHeight = 0.1;
    config1.waveCount = 1;

    var gauge1 = loadLiquidFillGauge("fillgauge1", 55, config1);


 		function NewValue(){
        if(Math.random() > .5){
            return Math.round(Math.random()*100);
        } else {
            return (Math.random()*100).toFixed(1);
        }
    }

    setInterval( gauge1.update(NewValue()), 3000);


</script>
</body>
</html>

## liquidFillGauge.js
/*!
 * @license Open source under BSD 2-clause (http://choosealicense.com/licenses/bsd-2-clause/)
 * Copyright (c) 2015, Curtis Bratton
 * All rights reserved.
 *
 * Liquid Fill Gauge v1.1
 */
function liquidFillGaugeDefaultSettings(){
    return {
        minValue: 0, // The gauge minimum value.
        maxValue: 100, // The gauge maximum value.
        circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius.
        circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
        circleColor: "#178BCA", // The color of the outer circle.
        waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.
        waveCount: 1, // The number of full waves per width of the wave circle.
        waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
        waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.
        waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
        waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill.
        waveAnimate: true, // Controls if the wave scrolls or is static.
        waveColor: "#178BCA", // The color of the fill wave.
        waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
        textVertPosition: .5, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
        textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50%
        valueCountUp: true, // If true, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed.
        displayPercent: true, // If true, a % symbol is displayed after the value.
        textColor: "#045681", // The color of the value text when the wave does not overlap it.
        waveTextColor: "#A4DBf8" // The color of the value text when the wave overlaps it.
    };
}

function loadLiquidFillGauge(elementId, value, config) {
    if(config == null) config = liquidFillGaugeDefaultSettings();

    var gauge = d3.select("#" + elementId);
    var radius = Math.min(parseInt(gauge.style("width")), parseInt(gauge.style("height")))/2;
    var locationX = parseInt(gauge.style("width"))/2 - radius;
    var locationY = parseInt(gauge.style("height"))/2 - radius;
    var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue;

    var waveHeightScale;
    if(config.waveHeightScaling){
        waveHeightScale = d3.scale.linear()
            .range([0,config.waveHeight,0])
            .domain([0,50,100]);
    } else {
        waveHeightScale = d3.scale.linear()
            .range([config.waveHeight,config.waveHeight])
            .domain([0,100]);
    }

    var textPixels = (config.textSize*radius/2);
    var textFinalValue = parseFloat(value).toFixed(2);
    var textStartValue = config.valueCountUp?config.minValue:textFinalValue;
    var percentText = config.displayPercent?"%":"";
    var circleThickness = config.circleThickness * radius;
    var circleFillGap = config.circleFillGap * radius;
    var fillCircleMargin = circleThickness + circleFillGap;
    var fillCircleRadius = radius - fillCircleMargin;
    var waveHeight = fillCircleRadius*waveHeightScale(fillPercent*100);

    var waveLength = fillCircleRadius*2/config.waveCount;
    var waveClipCount = 1+config.waveCount;
    var waveClipWidth = waveLength*waveClipCount;

    // Rounding functions so that the correct number of decimal places is always displayed as the value counts up.
    var textRounder = function(value){ return Math.round(value); };
    if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){
        textRounder = function(value){ return parseFloat(value).toFixed(1); };
    }
    if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){
        textRounder = function(value){ return parseFloat(value).toFixed(2); };
    }

    // Data for building the clip wave area.
    var data = [];
    for(var i = 0; i <= 40*waveClipCount; i++){
        data.push({x: i/(40*waveClipCount), y: (i/(40))});
    }

    // Scales for drawing the outer circle.
    var gaugeCircleX = d3.scale.linear().range([0,2*Math.PI]).domain([0,1]);
    var gaugeCircleY = d3.scale.linear().range([0,radius]).domain([0,radius]);

    // Scales for controlling the size of the clipping path.
    var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]);
    var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]);

    // Scales for controlling the position of the clipping path.
    var waveRiseScale = d3.scale.linear()
        // The clipping area size is the height of the fill circle + the wave height, so we position the clip wave
        // such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill
        // circle at 100%.
        .range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)])
        .domain([0,1]);
    var waveAnimateScale = d3.scale.linear()
        .range([0, waveClipWidth-fillCircleRadius*2]) // Push the clip area one full wave then snap back.
        .domain([0,1]);

    // Scale for controlling the position of the text within the gauge.
    var textRiseScaleY = d3.scale.linear()
        .range([fillCircleMargin+fillCircleRadius*2,(fillCircleMargin+textPixels*0.7)])
        .domain([0,1]);

    // Center the gauge within the parent SVG.
    var gaugeGroup = gauge.append("g")
        .attr('transform','translate('+locationX+','+locationY+')');

    // Draw the outer circle.
    var gaugeCircleArc = d3.svg.arc()
        .startAngle(gaugeCircleX(0))
        .endAngle(gaugeCircleX(1))
        .outerRadius(gaugeCircleY(radius))
        .innerRadius(gaugeCircleY(radius-circleThickness));
    gaugeGroup.append("path")
        .attr("d", gaugeCircleArc)
        .style("fill", config.circleColor)
        .attr('transform','translate('+radius+','+radius+')');

    // Text where the wave does not overlap.
    var text1 = gaugeGroup.append("text")
        .text(textRounder(textStartValue) + percentText)
        .attr("class", "liquidFillGaugeText")
        .attr("text-anchor", "middle")
        .attr("font-size", textPixels + "px")
        .style("fill", config.textColor)
        .attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')');

    // The clipping wave area.
    var clipArea = d3.svg.area()
        .x(function(d) { return waveScaleX(d.x); } )
        .y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d.y*2*Math.PI));} )
        .y1(function(d) { return (fillCircleRadius*2 + waveHeight); } );
    var waveGroup = gaugeGroup.append("defs")
        .append("clipPath")
        .attr("id", "clipWave" + elementId);
    var wave = waveGroup.append("path")
        .datum(data)
        .attr("d", clipArea)
        .attr("T", 0);

    // The inner circle with the clipping wave attached.
    var fillCircleGroup = gaugeGroup.append("g")
        .attr("clip-path", "url(#clipWave" + elementId + ")");
    fillCircleGroup.append("circle")
        .attr("cx", radius)
        .attr("cy", radius)
        .attr("r", fillCircleRadius)
        .style("fill", config.waveColor);

    // Text where the wave does overlap.
    var text2 = fillCircleGroup.append("text")
        .text(textRounder(textStartValue) + percentText)
        .attr("class", "liquidFillGaugeText")
        .attr("text-anchor", "middle")
        .attr("font-size", textPixels + "px")
        .style("fill", config.waveTextColor)
        .attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')');

    // Make the value count up.
    if(config.valueCountUp){
        var textTween = function(){
            var i = d3.interpolate(this.textContent, textFinalValue);
            return function(t) { this.textContent = textRounder(i(t)) + percentText; }
        };
        text1.transition()
            .duration(config.waveRiseTime)
            .tween("text", textTween);
        text2.transition()
            .duration(config.waveRiseTime)
            .tween("text", textTween);
    }

    // Make the wave rise. wave and waveGroup are separate so that horizontal and vertical movement can be controlled independently.
    var waveGroupXPosition = fillCircleMargin+fillCircleRadius*2-waveClipWidth;
    if(config.waveRise){
        waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')')
            .transition()
            .duration(config.waveRiseTime)
            .attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')')
            .each("start", function(){ wave.attr('transform','translate(1,0)'); }); // This transform is necessary to get the clip wave positioned correctly when waveRise=true and waveAnimate=false. The wave will not position correctly without this, but it's not clear why this is actually necessary.
    } else {
        waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')');
    }

    if(config.waveAnimate) animateWave();

    function animateWave() {
        wave.attr('transform','translate('+waveAnimateScale(wave.attr('T'))+',0)');
        wave.transition()
            .duration(config.waveAnimateTime * (1-wave.attr('T')))
            .ease('linear')
            .attr('transform','translate('+waveAnimateScale(1)+',0)')
            .attr('T', 1)
            .each('end', function(){
                wave.attr('T', 0);
                animateWave(config.waveAnimateTime);
            });
    }

    function GaugeUpdater(){
        this.update = function(value){
            var newFinalValue = parseFloat(value).toFixed(2);
            var textRounderUpdater = function(value){ return Math.round(value); };
            if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){
                textRounderUpdater = function(value){ return parseFloat(value).toFixed(1); };
            }
            if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){
                textRounderUpdater = function(value){ return parseFloat(value).toFixed(2); };
            }

            var textTween = function(){
                var i = d3.interpolate(this.textContent, parseFloat(value).toFixed(2));
                return function(t) { this.textContent = textRounderUpdater(i(t)) + percentText; }
            };

            text1.transition()
                .duration(config.waveRiseTime)
                .tween("text", textTween);
            text2.transition()
                .duration(config.waveRiseTime)
                .tween("text", textTween);

            var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue;
            var waveHeight = fillCircleRadius*waveHeightScale(fillPercent*100);
            var waveRiseScale = d3.scale.linear()
                // The clipping area size is the height of the fill circle + the wave height, so we position the clip wave
                // such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill
                // circle at 100%.
                .range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)])
                .domain([0,1]);
            var newHeight = waveRiseScale(fillPercent);
            var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]);
            var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]);
            var newClipArea;
            if(config.waveHeightScaling){
                newClipArea = d3.svg.area()
                    .x(function(d) { return waveScaleX(d.x); } )
                    .y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d.y*2*Math.PI));} )
                    .y1(function(d) { return (fillCircleRadius*2 + waveHeight); } );
            } else {
                newClipArea = clipArea;
            }

            var newWavePosition = config.waveAnimate?waveAnimateScale(1):0;
            wave.transition()
                .duration(0)
                .transition()
                .duration(config.waveAnimate?(config.waveAnimateTime * (1-wave.attr('T'))):(config.waveRiseTime))
                .ease('linear')
                .attr('d', newClipArea)
                .attr('transform','translate('+newWavePosition+',0)')
                .attr('T','1')
                .each("end", function(){
                    if(config.waveAnimate){
                        wave.attr('transform','translate('+waveAnimateScale(0)+',0)');
                        animateWave(config.waveAnimateTime);
                    }
                });
            waveGroup.transition()
                .duration(config.waveRiseTime)
                .attr('transform','translate('+waveGroupXPosition+','+newHeight+')')
        }
    }

    return new GaugeUpdater();
}
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>
	<script src="liquidFillGauge.js" language="JavaScript"></script>
	<style>
	.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
	</style>
	</head>
	<body>
	<svg id="fillgauge1" width="97%" height="250" ></svg>
	<svg id="fillgauge2" width="19%" height="200" onclick="gauge2.update(NewValue());"></svg>

	<script language="JavaScript">


	var config1 = liquidFillGaugeDefaultSettings();
	config1.circleThickness = 0.1;
	config1.circleFillGap = 0.1;
	config1.textVertPosition = 0.8;
	config1.waveAnimateTime = 1000;
	config1.waveHeight = 0.1;
	config1.waveCount = 1;

	var gauge1 = loadLiquidFillGauge("fillgauge1", 55, config1);


	function NewValue(){
	if(Math.random() > .5){
	return Math.round(Math.random()*100);
	} else {
	return (Math.random()*100).toFixed(1);
	}
	}

	setInterval( gauge1.update(NewValue()), 3000);



	</script>
	</body>
	</html>
	/*!
	* @license Open source under BSD 2-clause (http://choosealicense.com/licenses/bsd-2-clause/)
	* Copyright (c) 2015, Curtis Bratton
	* All rights reserved.
	*
	* Liquid Fill Gauge v1.1
	*/
	function liquidFillGaugeDefaultSettings(){
	return {
	minValue: 0, // The gauge minimum value.
	maxValue: 100, // The gauge maximum value.
	circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius.
	circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
	circleColor: "#178BCA", // The color of the outer circle.
	waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.
	waveCount: 1, // The number of full waves per width of the wave circle.
	waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
	waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.
	waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
	waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill.
	waveAnimate: true, // Controls if the wave scrolls or is static.
	waveColor: "#178BCA", // The color of the fill wave.
	waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
	textVertPosition: .5, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
	textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50%
	valueCountUp: true, // If true, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed.
	displayPercent: true, // If true, a % symbol is displayed after the value.
	textColor: "#045681", // The color of the value text when the wave does not overlap it.
	waveTextColor: "#A4DBf8" // The color of the value text when the wave overlaps it.
	};
	}

	function loadLiquidFillGauge(elementId, value, config) {
	if(config == null) config = liquidFillGaugeDefaultSettings();

	var gauge = d3.select("#" + elementId);
	var radius = Math.min(parseInt(gauge.style("width")), parseInt(gauge.style("height")))/2;
	var locationX = parseInt(gauge.style("width"))/2 - radius;
	var locationY = parseInt(gauge.style("height"))/2 - radius;
	var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue;

	var waveHeightScale;
	if(config.waveHeightScaling){
	waveHeightScale = d3.scale.linear()
	.range([0,config.waveHeight,0])
	.domain([0,50,100]);
	} else {
	waveHeightScale = d3.scale.linear()
	.range([config.waveHeight,config.waveHeight])
	.domain([0,100]);
	}

	var textPixels = (config.textSize*radius/2);
	var textFinalValue = parseFloat(value).toFixed(2);
	var textStartValue = config.valueCountUp?config.minValue:textFinalValue;
	var percentText = config.displayPercent?"%":"";
	var circleThickness = config.circleThickness * radius;
	var circleFillGap = config.circleFillGap * radius;
	var fillCircleMargin = circleThickness + circleFillGap;
	var fillCircleRadius = radius - fillCircleMargin;
	var waveHeight = fillCircleRadiuswaveHeightScale(fillPercent100);

	var waveLength = fillCircleRadius*2/config.waveCount;
	var waveClipCount = 1+config.waveCount;
	var waveClipWidth = waveLength*waveClipCount;

	// Rounding functions so that the correct number of decimal places is always displayed as the value counts up.
	var textRounder = function(value){ return Math.round(value); };
	if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){
	textRounder = function(value){ return parseFloat(value).toFixed(1); };
	}
	if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){
	textRounder = function(value){ return parseFloat(value).toFixed(2); };
	}

	// Data for building the clip wave area.
	var data = [];
	for(var i = 0; i <= 40*waveClipCount; i++){
	data.push({x: i/(40*waveClipCount), y: (i/(40))});
	}

	// Scales for drawing the outer circle.
	var gaugeCircleX = d3.scale.linear().range([0,2*Math.PI]).domain([0,1]);
	var gaugeCircleY = d3.scale.linear().range([0,radius]).domain([0,radius]);

	// Scales for controlling the size of the clipping path.
	var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]);
	var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]);

	// Scales for controlling the position of the clipping path.
	var waveRiseScale = d3.scale.linear()
	// The clipping area size is the height of the fill circle + the wave height, so we position the clip wave
	// such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill
	// circle at 100%.
	.range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)])
	.domain([0,1]);
	var waveAnimateScale = d3.scale.linear()
	.range([0, waveClipWidth-fillCircleRadius*2]) // Push the clip area one full wave then snap back.
	.domain([0,1]);

	// Scale for controlling the position of the text within the gauge.
	var textRiseScaleY = d3.scale.linear()
	.range([fillCircleMargin+fillCircleRadius2,(fillCircleMargin+textPixels0.7)])
	.domain([0,1]);

	// Center the gauge within the parent SVG.
	var gaugeGroup = gauge.append("g")
	.attr('transform','translate('+locationX+','+locationY+')');

	// Draw the outer circle.
	var gaugeCircleArc = d3.svg.arc()
	.startAngle(gaugeCircleX(0))
	.endAngle(gaugeCircleX(1))
	.outerRadius(gaugeCircleY(radius))
	.innerRadius(gaugeCircleY(radius-circleThickness));
	gaugeGroup.append("path")
	.attr("d", gaugeCircleArc)
	.style("fill", config.circleColor)
	.attr('transform','translate('+radius+','+radius+')');

	// Text where the wave does not overlap.
	var text1 = gaugeGroup.append("text")
	.text(textRounder(textStartValue) + percentText)
	.attr("class", "liquidFillGaugeText")
	.attr("text-anchor", "middle")
	.attr("font-size", textPixels + "px")
	.style("fill", config.textColor)
	.attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')');

	// The clipping wave area.
	var clipArea = d3.svg.area()
	.x(function(d) { return waveScaleX(d.x); } )
	.y0(function(d) { return waveScaleY(Math.sin(Math.PI2config.waveOffset-1 + Math.PI2(1-config.waveCount) + d.y2*Math.PI));} )
	.y1(function(d) { return (fillCircleRadius*2 + waveHeight); } );
	var waveGroup = gaugeGroup.append("defs")
	.append("clipPath")
	.attr("id", "clipWave" + elementId);
	var wave = waveGroup.append("path")
	.datum(data)
	.attr("d", clipArea)
	.attr("T", 0);

	// The inner circle with the clipping wave attached.
	var fillCircleGroup = gaugeGroup.append("g")
	.attr("clip-path", "url(#clipWave" + elementId + ")");
	fillCircleGroup.append("circle")
	.attr("cx", radius)
	.attr("cy", radius)
	.attr("r", fillCircleRadius)
	.style("fill", config.waveColor);

	// Text where the wave does overlap.
	var text2 = fillCircleGroup.append("text")
	.text(textRounder(textStartValue) + percentText)
	.attr("class", "liquidFillGaugeText")
	.attr("text-anchor", "middle")
	.attr("font-size", textPixels + "px")
	.style("fill", config.waveTextColor)
	.attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')');

	// Make the value count up.
	if(config.valueCountUp){
	var textTween = function(){
	var i = d3.interpolate(this.textContent, textFinalValue);
	return function(t) { this.textContent = textRounder(i(t)) + percentText; }
	};
	text1.transition()
	.duration(config.waveRiseTime)
	.tween("text", textTween);
	text2.transition()
	.duration(config.waveRiseTime)
	.tween("text", textTween);
	}

	// Make the wave rise. wave and waveGroup are separate so that horizontal and vertical movement can be controlled independently.
	var waveGroupXPosition = fillCircleMargin+fillCircleRadius*2-waveClipWidth;
	if(config.waveRise){
	waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')')
	.transition()
	.duration(config.waveRiseTime)
	.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')')
	.each("start", function(){ wave.attr('transform','translate(1,0)'); }); // This transform is necessary to get the clip wave positioned correctly when waveRise=true and waveAnimate=false. The wave will not position correctly without this, but it's not clear why this is actually necessary.
	} else {
	waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')');
	}

	if(config.waveAnimate) animateWave();

	function animateWave() {
	wave.attr('transform','translate('+waveAnimateScale(wave.attr('T'))+',0)');
	wave.transition()
	.duration(config.waveAnimateTime * (1-wave.attr('T')))
	.ease('linear')
	.attr('transform','translate('+waveAnimateScale(1)+',0)')
	.attr('T', 1)
	.each('end', function(){
	wave.attr('T', 0);
	animateWave(config.waveAnimateTime);
	});
	}

	function GaugeUpdater(){
	this.update = function(value){
	var newFinalValue = parseFloat(value).toFixed(2);
	var textRounderUpdater = function(value){ return Math.round(value); };
	if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){
	textRounderUpdater = function(value){ return parseFloat(value).toFixed(1); };
	}
	if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){
	textRounderUpdater = function(value){ return parseFloat(value).toFixed(2); };
	}

	var textTween = function(){
	var i = d3.interpolate(this.textContent, parseFloat(value).toFixed(2));
	return function(t) { this.textContent = textRounderUpdater(i(t)) + percentText; }
	};

	text1.transition()
	.duration(config.waveRiseTime)
	.tween("text", textTween);
	text2.transition()
	.duration(config.waveRiseTime)
	.tween("text", textTween);

	var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue;
	var waveHeight = fillCircleRadiuswaveHeightScale(fillPercent100);
	var waveRiseScale = d3.scale.linear()
	// The clipping area size is the height of the fill circle + the wave height, so we position the clip wave
	// such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill
	// circle at 100%.
	.range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)])
	.domain([0,1]);
	var newHeight = waveRiseScale(fillPercent);
	var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]);
	var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]);
	var newClipArea;
	if(config.waveHeightScaling){
	newClipArea = d3.svg.area()
	.x(function(d) { return waveScaleX(d.x); } )
	.y0(function(d) { return waveScaleY(Math.sin(Math.PI2config.waveOffset-1 + Math.PI2(1-config.waveCount) + d.y2*Math.PI));} )
	.y1(function(d) { return (fillCircleRadius*2 + waveHeight); } );
	} else {
	newClipArea = clipArea;
	}

	var newWavePosition = config.waveAnimate?waveAnimateScale(1):0;
	wave.transition()
	.duration(0)
	.transition()
	.duration(config.waveAnimate?(config.waveAnimateTime * (1-wave.attr('T'))):(config.waveRiseTime))
	.ease('linear')
	.attr('d', newClipArea)
	.attr('transform','translate('+newWavePosition+',0)')
	.attr('T','1')
	.each("end", function(){
	if(config.waveAnimate){
	wave.attr('transform','translate('+waveAnimateScale(0)+',0)');
	animateWave(config.waveAnimateTime);
	}
	});
	waveGroup.transition()
	.duration(config.waveRiseTime)
	.attr('transform','translate('+waveGroupXPosition+','+newHeight+')')
	}
	}

	return new GaugeUpdater();
	}