Gauge II

Example showing the ease option for the needle transition.

Part of Gauge example Series: Gauge I, Gauge II, Gauge III

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.label{
	font-size:22.5px;
	fill:#ffffff;
	text-anchor:middle;
	alignment-baseline:middle;
}
.face{
	stroke:#c8c8c8;
	stroke-width:2;
}
.minorTicks{
	stroke-width:2;
	stroke:white;
}
.majorTicks{
	stroke:white;
	stroke-width:3;
}
</style>
<body>
<div>
<select id="easeModes" onChange="changeEase(this.value)">
  <option value="linear">linear</option>
  <option value="quad-in">quad-in</option>
  <option value="quad-out">quad-out</option>
  <option value="quad-in-out">quad-in-out</option>
  <option value="cubic-in">cubic-in</option>
  <option value="cubic-out">cubic-out</option>
  <option value="cubic-in-out">cubic-in-out</option>
  <option value="sin-in">sin-in</option>
  <option value="sin-out">sin-out</option>
  <option value="sin-in-out">sin-in-out</option>
  <option value="exp-in">exp-in</option>
  <option value="exp-out">exp-out</option>
  <option value="exp-in-out">exp-in-out</option>
  <option value="circle-in">circle-in</option>
  <option value="circle-out">circle-out</option>
  <option value="circle-in-out">circle-in-out</option>
  <option selected value="bounce-in">bounce-in</option>
  <option value="bounce-out">bounce-out</option>
  <option value="bounce-in-out">bounce-in-out</option>
  <option value="back-in">back-in</option>
  <option value="back-out">back-out</option>
  <option value="back-in-out">back-in-out</option>
  <option value="elastic-in">elastic-in</option>
  <option value="elastic-out">elastic-out</option>
  <option value="elastic-in-out">elastic-in-out</option>
</select>
</div>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://vizjs.org/viz.v1.0.0.min.js"></script>
<script>
  
  	// create a gauge object by setting various options.
  	var gg = viz.gg()
			.faceColor("#003CEC")
			.innerFaceColor("#003CEC")
			.needleColor("#fff")
			.outerRadius(300)
			.innerRadius(40)
			.minorTickStart(0.9)
			.majorTickStart(0.85)
			.labelLocation(.78)
			.ease("linear")			
			.ease("bounce-in")
		;
	
	// create the gradients and filters in svg.
	gg.defs(d3.select("svg"),1);
	
	// draw the gauge in the svg
	d3.select("svg")
		.append("g")
		.attr("transform","translate(480,300)")
		.call(gg);

function changeEase(v){ gg = gg.ease(v); }
	
	setInterval( function(){ gg.setNeedle(Math.random()*100); },2000);
	
	 d3.select(self.frameElement).style("height", "620px");
</script>
</body>
</html>

Modified http://vizjs.org/viz.v1.0.0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://vizjs.org/viz.v1.0.0.min.js