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>
@AntarjotSingh
Copy link

It's not working while I am running the same index.html on my system. The Polar clock doesn't appear. Can you help me with it??

@AntarjotSingh
Copy link

Its resolved now !! In the script tag https: is missing, so, it wasn't able to pickup d3.js

@danse
Copy link

danse commented Nov 20, 2017

thanks @AntarjotSingh that helped me today :)

@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