block by NPashaP 59c2c7483fb61070486835d15c807941

Gauge I

Full Screen

Simple Example of gg (Gauge) visualization of VizJS.

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

index.html

<!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>
<svg width="900" height="700"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//vizjs.org/viz.v1.0.0.min.js"></script>
<script>
  var svg=d3.select("svg");
  var g=svg.append("g").attr("transform","translate(450,350)");
  var domain = [0,100];
  
  var gg = viz.gg()
	.domain(domain)
	.outerRadius(300)
	.innerRadius(30)
	.value(0.5*(domain[1]+domain[0]))
	.duration(1000);
  
  gg.defs(svg);
  g.call(gg);  
  
  d3.select(self.frameElement).style("height", "700px");
  setInterval( function(){gg.setNeedle(domain[0]+Math.random()*(domain[1]-domain[0]));},2000);
</script>
</body>
</html>