vicapow/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <style>
    body{
      font-family: helvetica;
    }
    .thermometer{
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
    .thermometer svg{
      background-color: blue;
    }
    .thermometer .degree{
      stroke: blue;
      stroke-width: 4;
      fill: red;
    }
    .thermometer .handle{
      fill: white;
      stroke: none;
    }
    .thermometer text{
      font-size: 80px;
      text-anchor: middle;
      fill: white;
    }
  </style>
  <body>
    <div class="thermometer">
      <svg></svg>
    </div>
    <script>

var el = d3.select('.thermometer')
var w = el.node().clientWidth
var h = el.node().clientHeight
var r = Math.min(w, h) / 2
var pi = Math.PI

var svg = el.select('svg').attr({width: w, height: h})
  .append('g').attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')')

var pie = d3.layout.pie().startAngle(-pi/1.2).endAngle(pi/1.2)

var arc = d3.svg.arc().innerRadius(r * 0.7).outerRadius(r * 0.9)

svg.selectAll('path.degree').data(pie(d3.range(90).map(function(){ return 1 })))
  .enter().append('path').attr('class', 'degree')
  .attr('d', arc)

var handle = svg.append('g')
handle.append('rect').attr('class', 'handle')
  .attr({ width: 50, height: 5, y: -2.5, x: r - 65 })

var scale = d3.scale.linear().domain([0, 100]).range([-180, 0])

var display = svg.append('text').text('72').attr('y', 20)

handle.attr('transform', 'rotate(0)').call(loop)

var val = 0
function loop(sel){
  val = Math.round(Math.random() * 100)
  sel.transition().duration(1000)
  .attr('transform', 'rotate(' + scale(val) + ')')
  .each('end', function(){ loop(d3.select(this)) })
  display.datum(val).transition().duration(1000).tween("text", function(d) {
      var i = d3.interpolate(this.textContent, d)
      return function(t) {
          this.textContent = Math.round(i(t));
      };
  });
}

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<style>
	body{
	font-family: helvetica;
	}
	.thermometer{
	width: 400px;
	height: 400px;
	overflow: hidden;
	}
	.thermometer svg{
	background-color: blue;
	}
	.thermometer .degree{
	stroke: blue;
	stroke-width: 4;
	fill: red;
	}
	.thermometer .handle{
	fill: white;
	stroke: none;
	}
	.thermometer text{
	font-size: 80px;
	text-anchor: middle;
	fill: white;
	}
	</style>
	<body>
	<div class="thermometer">
	<svg></svg>
	</div>
	<script>

	var el = d3.select('.thermometer')
	var w = el.node().clientWidth
	var h = el.node().clientHeight
	var r = Math.min(w, h) / 2
	var pi = Math.PI

	var svg = el.select('svg').attr({width: w, height: h})
	.append('g').attr('transform', 'translate(' + w / 2 + ',' + h / 2 + ')')

	var pie = d3.layout.pie().startAngle(-pi/1.2).endAngle(pi/1.2)

	var arc = d3.svg.arc().innerRadius(r * 0.7).outerRadius(r * 0.9)

	svg.selectAll('path.degree').data(pie(d3.range(90).map(function(){ return 1 })))
	.enter().append('path').attr('class', 'degree')
	.attr('d', arc)

	var handle = svg.append('g')
	handle.append('rect').attr('class', 'handle')
	.attr({ width: 50, height: 5, y: -2.5, x: r - 65 })

	var scale = d3.scale.linear().domain([0, 100]).range([-180, 0])

	var display = svg.append('text').text('72').attr('y', 20)

	handle.attr('transform', 'rotate(0)').call(loop)

	var val = 0
	function loop(sel){
	val = Math.round(Math.random() * 100)
	sel.transition().duration(1000)
	.attr('transform', 'rotate(' + scale(val) + ')')
	.each('end', function(){ loop(d3.select(this)) })
	display.datum(val).transition().duration(1000).tween("text", function(d) {
	var i = d3.interpolate(this.textContent, d)
	return function(t) {
	this.textContent = Math.round(i(t));
	};
	});
	}

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