Arc Clock
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
reshma21menon commentedJan 23, 2018
•
edited
Sir, can we embed all the three circles into one circle? Like one inside the other. My teacher asked me to do like this.