Every second, draws a black triangle made of the coordinates on the clock of the current second, minute and hour. Previous triangles are displayed in white.
After one hour, all trinagles are deleted.
license: gpl-3.0 |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
svg { | |
background-color: #bdbdbd; | |
width: 500px; | |
height: 500px; | |
} | |
circle { | |
fill: #f0f0f0; | |
} | |
path { | |
fill: none; | |
stroke: black; | |
stroke-width: 1.5; | |
} | |
path.old { | |
stroke: white; | |
stroke-width: 0.5; | |
} | |
</style> | |
</head> | |
<body> | |
<svg></svg> | |
</body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-timer.v1.min.js"></script> | |
<script type="text/javascript"> | |
var svg = d3.select("svg") | |
// Create the clock | |
var items = 60; | |
var x0 = 250; | |
var y0 = 250; | |
var r = 240 | |
for(var i = 0; i < items; i++) { | |
var x = x0 + r * Math.cos(2 * Math.PI * i / items); | |
var y = y0 + r * Math.sin(2 * Math.PI * i / items); | |
if (i < 45) { | |
var id = i + 15 | |
} else { | |
var id = i % 45 | |
} | |
var circle = svg.append("circle") | |
.attr("cx", x) | |
.attr("cy", y) | |
.attr("id", "c_" + id) | |
.attr("r", 1) | |
} | |
var lineGenerator = d3.line(); | |
var i = 1; | |
var t = d3.interval(function(elapsed) { | |
d3.selectAll('path') | |
.classed('old', true) | |
// Check the current time | |
var current_time = new Date() | |
// Get the current second, minute, hour | |
var second = d3.select("circle#c_" + current_time.getSeconds()) | |
var minute = d3.select("circle#c_" + current_time.getMinutes()) | |
var hour = d3.select("circle#c_" + current_time.getHours() %12 * 5) | |
var coordinates = [ | |
[second.attr('cx'), second.attr('cy')], | |
[minute.attr('cx'), minute.attr('cy')], | |
[hour.attr('cx'), hour.attr('cy')], | |
[second.attr('cx'), second.attr('cy')] | |
] | |
var path_current_time = lineGenerator(coordinates); | |
d3.select('svg') | |
.append('path') | |
.attr('d', path_current_time); | |
i = i + 1 | |
// Remove all paths after one hour | |
if (i == 3601) { | |
d3.selectAll('path').remove() | |
i = 1 | |
} | |
}, 1000); // Every second | |
</script> | |
</html> |