A simple demo with d3.timer()
forked from syntagmatic's block: Clock
forked from zanarmstrong's block: Time Data Comet
license: CC0-1.0 |
A simple demo with d3.timer()
forked from syntagmatic's block: Clock
forked from zanarmstrong's block: Time Data Comet
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
background: #eee; | |
width: 960px; | |
} | |
</style> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script> | |
// standard dimension variables | |
var width = 960, | |
height = 500; | |
// basic SVG setup | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
var x = d3.scale.linear() | |
.domain([0, 60]) | |
.range([0, width/5]) | |
var y = d3.scale.linear() | |
.domain([0, 60]) | |
.range([height/3, 0]) | |
var rScale = d3.scale.pow() | |
.domain([0, 60]) | |
.range([0, 40]) | |
.exponent(4) | |
var opacityScale = d3.scale.pow() | |
.domain([0, 60]) | |
.range([.7, .1]) | |
.exponent(.2) | |
// tick time | |
var counter = 0; | |
function tick() { | |
if (counter++ % 5 != 0) return; // ease up on cpu | |
//console.log(getTimeData().seconds) | |
svg.append("circle") | |
.attr("cx", x(getTimeData().seconds)) | |
.attr("cy", y(getTimeData().seconds)) | |
.attr("r", rScale(getTimeData().seconds)) | |
.style("opacity", opacityScale(getTimeData().seconds)) | |
.style("fill", "steelblue") | |
.transition() | |
.delay(30000) | |
.remove() | |
svg.append("text") | |
svg.select("text").text(getTimeData().seconds) | |
/* | |
svg.append("line") | |
.attr("x1", 10) | |
.attr("x2", 10) | |
.attr("y1", y(getTimeData().seconds)) | |
.attr("y2", y(getTimeData().seconds)) | |
.style("fill", "orange") | |
.style("stroke", "orange") | |
.transition() | |
.delay(4000) | |
.remove() | |
*/ | |
} | |
d3.timer(tick); | |
// get time function | |
function getTimeData() { | |
var now = new Date; | |
var milliseconds = now.getMilliseconds(); | |
var seconds = now.getSeconds() + milliseconds / 1000; | |
var minutes = now.getMinutes() + seconds / 60; | |
var hours = ((now.getHours() + 24) % 12 || 0) + minutes / 60; | |
return {date: now, ms: milliseconds, seconds: seconds, minutes: minutes, hours: hours} | |
} | |
</script> |