Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active June 9, 2024 02:00
Show Gist options
  • Save mbostock/1096355 to your computer and use it in GitHub Desktop.
Save mbostock/1096355 to your computer and use it in GitHub Desktop.
Polar Clock
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #222;
margin: auto;
width: 960px;
}
.arc-text {
font: 16px sans-serif;
}
.arc-center {
fill: none;
}
#credit {
position: absolute;
font: 10px sans-serif;
right: 10px;
bottom: 10px;
color: #ddd;
}
#credit a {
color: inherit;
}
</style>
<div id="credit">Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 800,
radius = Math.min(width, height) / 1.9,
spacing = .09;
var formatSecond = d3.time.format("%-S seconds"),
formatMinute = d3.time.format("%-M minutes"),
formatHour = d3.time.format("%-H hours"),
formatDay = d3.time.format("%A"),
formatDate = function(d) { d = d.getDate(); switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },
formatMonth = d3.time.format("%B");
var color = d3.scale.linear()
.range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])
.interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });
var arcBody = d3.svg.arc()
.startAngle(0)
.endAngle(function(d) { return d.value * 2 * Math.PI; })
.innerRadius(function(d) { return d.index * radius; })
.outerRadius(function(d) { return (d.index + spacing) * radius; })
.cornerRadius(6);
var arcCenter = d3.svg.arc()
.startAngle(0)
.endAngle(function(d) { return d.value * 2 * Math.PI; })
.innerRadius(function(d) { return (d.index + spacing / 2) * radius; })
.outerRadius(function(d) { return (d.index + spacing / 2) * radius; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var field = svg.selectAll("g")
.data(fields)
.enter().append("g");
field.append("path")
.attr("class", "arc-body");
field.append("path")
.attr("id", function(d, i) { return "arc-center-" + i; })
.attr("class", "arc-center");
field.append("text")
.attr("dy", ".35em")
.attr("dx", ".75em")
.style("text-anchor", "start")
.append("textPath")
.attr("startOffset", "50%")
.attr("class", "arc-text")
.attr("xlink:href", function(d, i) { return "#arc-center-" + i; });
tick();
d3.select(self.frameElement).style("height", height + "px");
function tick() {
if (!document.hidden) field
.each(function(d) { this._value = d.value; })
.data(fields)
.each(function(d) { d.previousValue = this._value; })
.transition()
.ease("elastic")
.duration(500)
.each(fieldTransition);
setTimeout(tick, 1000 - Date.now() % 1000);
}
function fieldTransition() {
var field = d3.select(this).transition();
field.select(".arc-body")
.attrTween("d", arcTween(arcBody))
.style("fill", function(d) { return color(d.value); });
field.select(".arc-center")
.attrTween("d", arcTween(arcCenter));
field.select(".arc-text")
.text(function(d) { return d.text; });
}
function arcTween(arc) {
return function(d) {
var i = d3.interpolateNumber(d.previousValue, d.value);
return function(t) {
d.value = i(t);
return arc(d);
};
};
}
function fields() {
var now = new Date;
return [
{index: .7, text: formatSecond(now), value: now.getSeconds() / 60},
{index: .6, text: formatMinute(now), value: now.getMinutes() / 60},
{index: .5, text: formatHour(now), value: now.getHours() / 24},
{index: .3, text: formatDay(now), value: now.getDay() / 7},
{index: .2, text: formatDate(now), value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},
{index: .1, text: formatMonth(now), value: now.getMonth() / 12}
];
}
</script>
@danse
Copy link

danse commented Nov 20, 2017

i like it more if the fastest arc is the smallest and the slowest is the biggest. you can see it here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment