Three simple pie charts displaying hours, minutes, seconds.
Last active
February 23, 2016 16:19
-
-
Save exakte-aesthetik/159def5c0e6534a039fb to your computer and use it in GitHub Desktop.
D3 Donut Clock
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Clock as trible Pie-Chart</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style media="screen"> | |
.arc-hour, .arc-minute, .arc-second{ | |
shape-rendering:geometricPrecision; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var setupChart = { | |
"margin": { | |
"top": 10, | |
"right": 50, | |
"bottom": 10, | |
"left": 50 | |
}, | |
width: function() {return 960 - this.margin.left - this.margin.right;}, | |
height: function() {return 500 - this.margin.top - this.margin.bottom;}, | |
radius: function() {return this.height()/2;}, | |
"radiusRing": 45, | |
"ringDistance": 1, | |
}; | |
var color = d3.scale.ordinal() | |
.range(["#2f4655", "#8a95a3", "#522c35", "#cca8b1", "#283b2f", "#9fb39f"]); | |
var time = setTime(); | |
// Arcs | |
var drawArcHour = d3.svg.arc() | |
.outerRadius(setupChart.radius()) | |
.innerRadius(setupChart.radius() - setupChart.radiusRing); | |
var drawArcMinute = d3.svg.arc() | |
.outerRadius(setupChart.radius() - setupChart.ringDistance - setupChart.radiusRing) | |
.innerRadius(setupChart.radius() - setupChart.ringDistance - (setupChart.radiusRing * 2)); | |
var drawArcSecond = d3.svg.arc() | |
.outerRadius(setupChart.radius() - (setupChart.ringDistance * 2 ) - (setupChart.radiusRing * 2)) | |
.innerRadius(setupChart.radius() - (setupChart.ringDistance * 2 ) - (setupChart.radiusRing * 3)); | |
// Pie-Layouts | |
var pieHour = d3.layout.pie() | |
.sort(null) | |
.value(function(d){ return d.hour;}); | |
var pieMinute = d3.layout.pie() | |
.sort(null) | |
.value(function(d){ return d.minute;}); | |
var pieSecond = d3.layout.pie() | |
.sort(null) | |
.value(function(d){ return d.second;}); | |
// Draw | |
var svg = d3.select("body").append("svg") | |
.attr("width", setupChart.width() + setupChart.margin.left + setupChart.margin.right) | |
.attr("height", setupChart.height() + setupChart.margin.top + setupChart.margin.bottom) | |
.append("g") | |
.attr("class", "chart") | |
.attr("transform", "translate(" + setupChart.margin.left + "," + setupChart.margin.top + ")") | |
.append("g") | |
.attr("class", "center") | |
.attr("transform", "translate(" + setupChart.width()/2 + "," +setupChart.height()/2 + ")"); | |
update(); | |
setInterval(function(){ | |
time = setTime(); | |
update(); | |
console.log(time); | |
}, 1000); | |
// Setup the time data object | |
function setTime(){ | |
var format = d3.time.format("%I-%M-%S"); | |
var currentTime = format(new Date()); | |
var currentTimeArray = currentTime.split("-"); | |
var timeObject = { | |
"hour" : parseInt(currentTimeArray[0],10), | |
"minute": parseInt(currentTimeArray[1],10), | |
"second": parseInt(currentTimeArray[2],10), | |
}; | |
var timeObjectSub = { | |
"hour" : 12 - currentTimeArray[0], | |
"minute": 60 - currentTimeArray[1], | |
"second": 60 - currentTimeArray[2], | |
}; | |
return [timeObject,timeObjectSub ]; | |
}; | |
function update(){ | |
// Hours | |
var arcsHour = svg.selectAll(".arc-hour") | |
.data(pieHour(time)) | |
.attr("class", "arc-hour"); | |
arcsHour.enter() | |
.append("path"); | |
arcsHour.attr("d", drawArcHour) | |
.attr("class", "arc-hour") | |
.style("fill",function(d,i){return color(i);}); | |
// Minutes | |
var arcsMinute = svg.selectAll(".arc-minute") | |
.data(pieMinute(time)) | |
.attr("class", "arc-minute"); | |
arcsMinute.enter() | |
.append("path"); | |
arcsMinute.attr("d", drawArcMinute) | |
.attr("class", "arc-minute") | |
.style("fill",function(d,i){return color(i+2);}); | |
// Seconds | |
var arcsSecond = svg.selectAll(".arc-second") | |
.data(pieSecond(time)) | |
.attr("class", "arc-second"); | |
arcsSecond.enter() | |
.append("path"); | |
arcsSecond.attr("d", drawArcSecond) | |
.attr("class", "arc-second") | |
.style("fill",function(d,i){return color(i+4);}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment