D3.js donut chart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="gauge1"></div>

CSS

body {
		  background: #eeeeee;
		}
		
		#gauge1 svg {
		  border: 1px solid black;
		}

JavaScript

$(document).ready(function() {

  var $this = $("#gauge1");


  var config = {
    amplitude: 0.01, // The wave height as a percentage of the radius of the wave circle.
    countPerWidth: 1, // The number of full waves per width of the wave circle.
    riseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
    animateTime: 1000, // The amount of time in milliseconds for a full wave to enter the wave circle.
    rise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height. 
    colorTransition: 1000,
    colorBefore: "#2e7d9b", // The color before of the fill wave.
    colorAfter: "#f88504",  // The color after of the fill wave.
    offset: 0 // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
  };


  var w = 20;
  var h = 150;
  var value = 30;

  var gauge = d3.select($this[0])
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g");

  var fillPercent = Math.max(0, Math.min(100, value)) / 100;

  var waveHeightScale = d3.scale.linear()
    .range([0, config.amplitude, 0])
    .domain([0, 50, 100]);

  var waveHeight = (h / 2) * waveHeightScale(fillPercent * 100);

  var waveLength = w / config.countPerWidth;
  var waveClipCount = 1 + config.countPerWidth;
  var waveClipWidth = waveLength * waveClipCount;

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