index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style>
.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;
}
</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 })
handle.attr('transform', 'rotate(0)').call(loop)
function loop(sel){
sel.transition().duration(1000)
.attr('transform', 'rotate(' + (-Math.round(Math.random() * 180 ) ) + ')')
.each('end', function(){ loop(d3.select(this)) })
}
</script>
</body>
</html>