mbostock/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.path--background {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

.label {
  font: 24px sans-serif;
  text-anchor: middle;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var fields = [
  {value: 24, size: 24, label: "h", update: function(date) { return date.getHours(); }},
  {value: 60, size: 60, label: "m", update: function(date) { return date.getMinutes(); }},
  {value: 60, size: 60, label: "s", update: function(date) { return date.getSeconds(); }}
];

var arc = d3.svg.arc()
    .innerRadius(width / 6.5 - 60)
    .outerRadius(width / 6.5 - 5)
    .startAngle(0)
    .endAngle(function(d) { return (d.value / d.size) * 2 * Math.PI; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var field = svg.selectAll(".field")
    .data(fields)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(" + (i * 2 + 1.25) / 6.5 * width + "," + height / 2 + ")"; })
    .attr("class", "field");

field.append("path")
    .attr("class", "path path--background")
    .attr("d", arc);

var path = field.append("path")
    .attr("class", "path path--foreground");

var label = field.append("text")
    .attr("class", "label")
    .attr("dy", ".35em");

(function update() {
  var now = new Date();

  field
      .each(function(d) { d.previous = d.value, d.value = d.update(now); });

  path.transition()
      .ease("elastic")
      .duration(750)
      .attrTween("d", arcTween);

  label
      .text(function(d) { return d.value + d.label; });

  setTimeout(update, 1000 - (now % 1000));
})();

function arcTween(b) {
  var i = d3.interpolate({value: b.previous}, b);
  return function(t) {
    return arc(i(t));
  };
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.path--background {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	.label {
	font: 24px sans-serif;
	text-anchor: middle;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var fields = [
	{value: 24, size: 24, label: "h", update: function(date) { return date.getHours(); }},
	{value: 60, size: 60, label: "m", update: function(date) { return date.getMinutes(); }},
	{value: 60, size: 60, label: "s", update: function(date) { return date.getSeconds(); }}
	];

	var arc = d3.svg.arc()
	.innerRadius(width / 6.5 - 60)
	.outerRadius(width / 6.5 - 5)
	.startAngle(0)
	.endAngle(function(d) { return (d.value / d.size) * 2 * Math.PI; });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var field = svg.selectAll(".field")
	.data(fields)
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(" + (i * 2 + 1.25) / 6.5 * width + "," + height / 2 + ")"; })
	.attr("class", "field");

	field.append("path")
	.attr("class", "path path--background")
	.attr("d", arc);

	var path = field.append("path")
	.attr("class", "path path--foreground");

	var label = field.append("text")
	.attr("class", "label")
	.attr("dy", ".35em");

	(function update() {
	var now = new Date();

	field
	.each(function(d) { d.previous = d.value, d.value = d.update(now); });

	path.transition()
	.ease("elastic")
	.duration(750)
	.attrTween("d", arcTween);

	label
	.text(function(d) { return d.value + d.label; });

	setTimeout(update, 1000 - (now % 1000));
	})();

	function arcTween(b) {
	var i = d3.interpolate({value: b.previous}, b);
	return function(t) {
	return arc(i(t));
	};
	}

	</script>