Skip to content

Instantly share code, notes, and snippets.

@exakte-aesthetik
Last active February 23, 2016 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save exakte-aesthetik/159def5c0e6534a039fb to your computer and use it in GitHub Desktop.
Save exakte-aesthetik/159def5c0e6534a039fb to your computer and use it in GitHub Desktop.
D3 Donut Clock

Three simple pie charts displaying hours, minutes, seconds.

<!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