All examples By author By category About

ClashTheBunny

Full window Github gist

Clock based on the Degrees, Minutes, and Seconds where the sun is overhead.

This clock's "hour" hand is really a degree hand. It points to the longitude where it is solar noon. The minutes and seconds point to the minutes and seconds of the location where it is solar noon. This is partly bases off of New Earth Time, but adjusted to fit geography more.

Based off of: bl.ocks.org/tomgp/6475678 /mbostock/4364903 and /mbostock/4597134

TODO: Make the clock less hard coded between the northern and southern hemisphere.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fff;
}

.nightN {
  stroke: DarkGray;
  fill: DarkGray;
  fill-opacity: .3;
}
.nightS {
  stroke: steelblue;
  fill: steelblue;
  fill-opacity: .3;
}
.second-hand{
	stroke-width:3;
	stroke: #000;
	stroke-opacity: .5;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.minute-hand{
	stroke-width:8;
	stroke-linecap:round;
	stroke: #000;
	stroke-opacity: .5;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.degree-hand{
	stroke-width:12;
	stroke-linecap:round;
	stroke: #000;
	stroke-opacity: .5;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.hands-cover{
	stroke-width:3;
	fill:#fff;
	stroke: #000;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.second-tick{
	stroke-width:3;
	fill:#000;	
	stroke: #000;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.degree-tick{
	stroke-width:8;
	stroke: #000;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.second-label{
	font-size: 12px;
	stroke: #000;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.degree-label{
	font-size: 22px;
	stroke: #000;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

</style>
<body>
<script src="d3.v3.min.js"></script>
<script src="topojson.v1.min.js"></script>
<script>

// var oldDate = Date;

// var fakeTime = '2011-10-10T14:48:00';

// Date = function (fake)
// {
//   return new oldDate(fakeTime);
// }

// Date.UTC = function (fake)
// {
// 	return new oldDate(fakeTime).getTime();
// }

// Date.now = function (fake)
// {
// 	return new oldDate(fakeTime).getTime();
// }

var refresh = 250, //milliseconds
    radians = 0.0174532925, 
	clockRadius = 130,
	margin = 75,
	width = (clockRadius+margin)*2,
    height = (clockRadius+margin)*2,
    degreeHandLength = 2*clockRadius/3,
    minuteHandLength = clockRadius,
    secondHandLength = clockRadius-12,
    secondHandBalance = 30,
    secondTickStart = clockRadius,
    secondTickLength = -10,
    degreeTickStart = clockRadius,
    degreeTickLength = -18,
    secondLabelRadius = clockRadius + 16,
    secondLabelYOffset = 5,
    degreeLabelRadius = clockRadius + 40,
    degreeLabelYOffset = 7,
    π = Math.PI,
    radians = π / 180,
    degrees = 180 / π;
    
var circleN = d3.geo.circle()
    .angle(90);
    
var circleS = d3.geo.circle()
    .angle(90);

var degreeScaleN = d3.scale.linear()
	.range([0,359])
	.domain([0,359]);

var minuteScaleN = secondScaleN = d3.scale.linear()
	.range([0,354])
	.domain([0,59]);

var degreeScaleS = d3.scale.linear()
	.range([0,359])
	.domain([359,0]);

var minuteScaleS = secondScaleS = d3.scale.linear()
	.range([0,354])
	.domain([0,59]);

var handData = [
	{
		type:'degree',
		value:0,
		length:-degreeHandLength,
		scaleN:degreeScaleN,
		scaleS:degreeScaleS
	},
	{
		type:'minute',
		value:0,
		length:-minuteHandLength,
		scaleN:minuteScaleN,
		scaleS:minuteScaleS
	},
	{
		type:'second',
		value:0,
		length:-secondHandLength,
		scaleN:secondScaleN,
		scaleS:secondScaleS,
		balance:secondHandBalance
	}
];

var projection = d3.geo.azimuthalEqualArea()
    .scale(clockRadius/2)
    .rotate([180,-90])
//    .clipAngle(180 - 90 + 23.4370998)    // to the opposite tropic
    .clipAngle(180 - 30)    // As does the United nations, so do we
    .translate([width / 2, height / 2])
    .precision(.1);
    
// var projection = d3.geo.orthographic()
//     .scale(clockRadius)
//     .translate([width/2,width/2])
//     .clipAngle(90)
//     .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

graticule.step([45,30]);  // UN again

var svgN = d3.select("body").append("svg")
    .attr("id", "clockN")
    .attr("width", width)
    .attr("height", height);

svgN.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svgN.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svgN.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svgN.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

var nightN = svgN.append("path")
      .attr("class", "nightN")
      .attr("d", path);

var faceN = svgN.append('g')
		.attr('id','clock-face')
		.attr('transform','translate(' + (clockRadius + margin) + ',' + (clockRadius + margin) + ')');

//add marks for seconds
	faceN.selectAll('.second-tick')
		.data(d3.range(0,60)).enter()
			.append('line')
			.attr('class', 'second-tick')
			.attr('x1',0)
			.attr('x2',0)
			.attr('y1',secondTickStart)
			.attr('y2',secondTickStart + secondTickLength)
			.attr('transform',function(d){
				return 'rotate(' + secondScaleN(d) + ')';
			});
	//and labels

faceN.selectAll('.second-label')
		.data(d3.range(5,61,5))
			.enter()
			.append('text')
			.attr('class', 'second-label')
			.attr('text-anchor','middle')
			.attr('x',function(d){
				return secondLabelRadius*Math.sin(secondScaleN(d)*radians);
			})
			.attr('y',function(d){
				return -secondLabelRadius*Math.cos(secondScaleN(d)*radians) + secondLabelYOffset;
			})
			.text(function(d){
				return d;
			});

//... and degrees
	faceN.selectAll('.degree-tick')
		.data(d3.range(180,-179,-30)).enter()
			.append('line')
			.attr('class', 'degree-tick')
			.attr('x1',0)
			.attr('x2',0)
			.attr('y1',degreeTickStart)
			.attr('y2',degreeTickStart + degreeTickLength)
			.attr('transform',function(d){
				return 'rotate(' + d + ')';
			});

faceN.selectAll('.degree-label')
		.data(d3.range(180,-180,-30))
			.enter()
			.append('text')
			.attr('class', 'degree-label')
			.attr('text-anchor','middle')
			.attr('x',function(d){
				return degreeLabelRadius*Math.sin(d*radians);
			})
			.attr('y',function(d){
				return -degreeLabelRadius*Math.cos(d*radians) + degreeLabelYOffset;
			})
			.text(function(d){
				return d == 180 ? "±" + d : - d;
			});

var handsN = faceN.append('g').attr('id','clock-hands');

faceN.append('g').attr('id','face-overlay')
		.append('circle').attr('class','hands-cover')
			.attr('x',0)
			.attr('y',0)
			.attr('r',clockRadius/20);

handsN.selectAll('line')
		.data(handData)
			.enter()
			.append('line')
			.attr('class', function(d){
				return d.type + '-hand';
			})
			.attr('x1',0)
			.attr('y1',function(d){
				return d.balance ? d.balance : 0;
			})
			.attr('x2',0)
			.attr('y2',function(d){
				return d.length;
			})
			.attr('transform',function(d){
				return 'rotate('+ d.scaleN(d.value) +')';
			});

var svgS = d3.select("body").append("svg")
	    .attr("id", "clockS")
	    .attr("width", width)
	    .attr("height", height);

svgS.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svgS.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svgS.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svgS.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

var nightS = svgS.append("path")
      .attr("class", "nightS")
      .attr("d", path);

d3.json("world-110m.json", function(error, world) {
	
projection.rotate([180,-90]);
  svgN.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

svgN.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
	
  projection.rotate([0,90]);

svgS.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

svgS.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
  
});

var faceS = svgS.append('g')
		.attr('id','clock-face')
		.attr('transform','translate(' + (clockRadius + margin) + ',' + (clockRadius + margin) + ')');

//add marks for seconds
	faceS.selectAll('.second-tick')
		.data(d3.range(0,60)).enter()
			.append('line')
			.attr('class', 'second-tick')
			.attr('x1',0)
			.attr('x2',0)
			.attr('y1',secondTickStart)
			.attr('y2',secondTickStart + secondTickLength)
			.attr('transform',function(d){
				return 'rotate(' + secondScaleS(d) + ')';
			});
	//and labels

faceS.selectAll('.second-label')
		.data(d3.range(5,61,5))
			.enter()
			.append('text')
			.attr('class', 'second-label')
			.attr('text-anchor','middle')
			.attr('x',function(d){
				return secondLabelRadius*Math.sin(secondScaleS(d)*radians);
			})
			.attr('y',function(d){
				return -secondLabelRadius*Math.cos(secondScaleS(d)*radians) + secondLabelYOffset;
			})
			.text(function(d){
				return d;
			});

//... and degrees
	faceS.selectAll('.degree-tick')
		.data(d3.range(180,-179,-30)).enter()
			.append('line')
			.attr('class', 'degree-tick')
			.attr('x1',0)
			.attr('x2',0)
			.attr('y1',degreeTickStart)
			.attr('y2',degreeTickStart + degreeTickLength)
			.attr('transform',function(d){
				return 'rotate(' + d + ')';
			});

faceS.selectAll('.degree-label')
		.data(d3.range(-180,180,30))
			.enter()
			.append('text')
			.attr('class', 'degree-label')
			.attr('text-anchor','middle')
			.attr('x',function(d){
				return degreeLabelRadius*Math.sin(d*radians);
			})
			.attr('y',function(d){
				return -degreeLabelRadius*Math.cos(d*radians) + degreeLabelYOffset;
			})
			.text(function(d){
				return d == -180 ? "±" + (- d ): d;
			});

var handsS = faceS.append('g').attr('id','clock-hands');

faceS.append('g').attr('id','face-overlay')
		.append('circle').attr('class','hands-cover')
			.attr('x',0)
			.attr('y',0)
			.attr('r',clockRadius/20);

handsS.selectAll('line')
		.data(handData)
			.enter()
			.append('line')
			.attr('class', function(d){
				return d.type + '-hand';
			})
			.attr('x1',0)
			.attr('y1',function(d){
				return d.balance ? d.balance : 0;
			})
			.attr('x2',0)
			.attr('y2',function(d){
				return d.length;
			})
			.attr('transform',function(d){
				return 'rotate('+ d.scaleS(d.value) +')';
			});

function moveHands(){
	d3.select('#clockN').selectAll('#clock-hands').selectAll('line')
	.data(handData)
		.transition().duration(refresh).ease("linear")
		.attr('transform',function(d){
			return 'rotate('+ d.scaleN(d.value) +')';
		});
		
	projection.rotate([180,-90])

nightN.datum(circleN.origin(antipode(solarPosition(new Date)))).attr("d", path);

d3.select('#clockS').selectAll('#clock-hands').selectAll('line')
	.data(handData)
		.transition().duration(refresh).ease("linear")
		.attr('transform',function(d){
			return 'rotate('+ d.scaleS(d.value) +')';
		});
	
	projection.rotate([0,90]);

nightS.datum(circleS.origin(antipode(solarPosition(new Date)))).attr("d", path);
}

function updateData(){
	var t = new Date();
	var day = new Date(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate(),0,0,0));
	millisecondsUTC = t.getTime()-day.getTime();
	millisecondsInDay = 86400000;
	var decDegrees = (millisecondsUTC)*360/millisecondsInDay;
	var degrees = Math.floor(decDegrees);
	var minutes = Math.floor(60*(decDegrees - degrees));
	var seconds = Math.floor(3600 * (decDegrees - degrees - minutes/60));
	handData[0].value = (degrees + 180) % 360;
	handData[1].value = minutes;
	handData[2].value = seconds;
}

setInterval(function(){
	updateData();
	moveHands();
}, refresh);

d3.select(self.frameElement).style("height", height + "px");

function antipode(position) {
  return [position[0] + 180, -position[1]];
}

function solarPosition(time) {
  var centuries = (time - Date.UTC(2000, 0, 1, 12)) / 864e5 / 36525, // since J2000
      longitude = (d3.time.day.utc.floor(time) - time) / 864e5 * 360 - 180;
  return [
    longitude - equationOfTime(centuries) * degrees,
    solarDeclination(centuries) * degrees
  ];
}

// Equations based on NOAA’s Solar Calculator; all angles in radians.
// https://www.esrl.noaa.gov/gmd/grad/solcalc/

function equationOfTime(centuries) {
  var e = eccentricityEarthOrbit(centuries),
      m = solarGeometricMeanAnomaly(centuries),
      l = solarGeometricMeanLongitude(centuries),
      y = Math.tan(obliquityCorrection(centuries) / 2);
  y *= y;
  return y * Math.sin(2 * l)
      - 2 * e * Math.sin(m)
      + 4 * e * y * Math.sin(m) * Math.cos(2 * l)
      - 0.5 * y * y * Math.sin(4 * l)
      - 1.25 * e * e * Math.sin(2 * m);
}

function solarDeclination(centuries) {
  return Math.asin(Math.sin(obliquityCorrection(centuries)) * Math.sin(solarApparentLongitude(centuries)));
}

function solarApparentLongitude(centuries) {
  return solarTrueLongitude(centuries) - (0.00569 + 0.00478 * Math.sin((125.04 - 1934.136 * centuries) * radians)) * radians;
}

function solarTrueLongitude(centuries) {
  return solarGeometricMeanLongitude(centuries) + solarEquationOfCenter(centuries);
}

function solarGeometricMeanAnomaly(centuries) {
  return (357.52911 + centuries * (35999.05029 - 0.0001537 * centuries)) * radians;
}

function solarGeometricMeanLongitude(centuries) {
  var l = (280.46646 + centuries * (36000.76983 + centuries * 0.0003032)) % 360;
  return (l < 0 ? l + 360 : l) / 180 * π;
}

function solarEquationOfCenter(centuries) {
  var m = solarGeometricMeanAnomaly(centuries);
  return (Math.sin(m) * (1.914602 - centuries * (0.004817 + 0.000014 * centuries))
      + Math.sin(m + m) * (0.019993 - 0.000101 * centuries)
      + Math.sin(m + m + m) * 0.000289) * radians;
}

function obliquityCorrection(centuries) {
  return meanObliquityOfEcliptic(centuries) + 0.00256 * Math.cos((125.04 - 1934.136 * centuries) * radians) * radians;
}

function meanObliquityOfEcliptic(centuries) {
  return (23 + (26 + (21.448 - centuries * (46.8150 + centuries * (0.00059 - centuries * 0.001813))) / 60) / 60) * radians;
}

function eccentricityEarthOrbit(centuries) {
  return 0.016708634 - centuries * (0.000042037 + 0.0000001267 * centuries);
}
</script>
</html>