Time Data Comet

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js