All examples By author By category About

tophtucker

Full window Github gist

A clock of Toph’s summer

A clock-itinerary of my summer, with current city rotating to be shown at the top. During flights it rotates over the flight path. The current shadow of night is shown in magenta.

Yes, I am a lucky duck.

Straight up ripping off @mbostock’s Lambert Azimuthal Equal-Area and Now + Solar Terminator.

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

body {
  background: #fff;
  font-family: sans-serif;
  font-size: 40px;
}

svg {
  /*overflow: visible;*/
}

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

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: 1;
}

.land {
  fill: #0f0;
}

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

g.city circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 3;
}

g.city text {
  text-anchor: middle;
  fill: #000;
}

g.flight use {
  fill: none;
  stroke-width: 3;
  stroke: #000;
}

g.flight text {
  text-anchor: middle;
}

g.city[data-city="Berlin"] text {
  text-anchor: end;
}

g.city[data-city="London"] text {
  text-anchor: start;
}

.night {
  stroke: none;
  fill: #f0f;
  fill-opacity: .3;
}

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

var cities = [
  {
    name: "Tokyo",
    coords: [139.683333, 35.683333]
  },
  {
    name: "Hong Kong",
    coords: [114.2, 22.3]
  },
  {
    name: "Berlin",
    coords: [13.383333, 52.516667]
  },
  {
    name: "London",
    coords: [-0.1275, 51.507222]
  },
  {
    name: "New York",
    coords: [-74.0059, 40.7127]
  }
];

var flights = [
  {
    from: "New York",
    to: "Tokyo",
    date: "July 20",
    shortDate: "7/20"
  },
  {
    from: "Tokyo",
    to: "Hong Kong",
    date: "July 28",
    shortDate: "7/28"
  },
  {
    from: "Hong Kong",
    to: "Berlin",
    date: "August 8",
    shortDate: "8/8"
  },
  {
    from: "Berlin",
    to: "London",
    date: "August 18",
    shortDate: "8/18"
  },
  {
    from: "London",
    to: "New York",
    date: "August 23",
    shortDate: "8/23"
  }
];

flights.forEach(function(flight) {
  var coords = [];
  coords.push(cities.filter(function(city) { return city.name === flight.from; })[0].coords);
  coords.push(cities.filter(function(city) { return city.name === flight.to; })[0].coords);
  flight.coords = coords;
});

/////

var schedule = [
  {
    name: "New York",
    date: new Date("Jul 20 2016 10:25 GMT-0400")
  },
  {
    name: "Tokyo",
    date: new Date("Jul 21 2016 15:50 GMT+0900")
  },
  {
    name: "Tokyo",
    date: new Date("Jul 28 2016 08:45 GMT+0900")
  },
  {
    name: "Hong Kong",
    date: new Date("Jul 28 2016 12:25 GMT+0800")
  },
  {
    name: "Hong Kong",
    date: new Date("Aug 08 2016 11:05 GMT+0800")
  },
  {
    name: "Berlin",
    date: new Date("Aug 08 2016 21:20 GMT+0200")
  },
  {
    name: "Berlin",
    date: new Date("Aug 18 2016 06:30 GMT+0200")
  },
  {
    name: "London",
    date: new Date("Aug 18 2016 07:25 GMT+0100")
  },
  {
    name: "London",
    date: new Date("Aug 18 2016 16:55 GMT+0100")
  },
  {
    name: "New York",
    date: new Date("Aug 23 2016 20:05 GMT-0400")
  }
];

schedule.forEach(function(d) {
  d.coords = cities.filter(function(city) { 
    return city.name === d.name;
  })[0].coords;
});

// geo interpolator; should modularize like:
// var clockScale = d3.scaleGeo()
//   .domain(schedule.map(function(d) { return d.date; }))
//   .range(schedule.map(function(d,i) { return d.coords[0]; }))
//   .clamp(true);
var clockScale = function(d) {
  var bi = d3.bisector(function(d) { return d.date; });
  var i = bi.left(schedule, d);

if(i === 0) return schedule[i].coords[0];
  if(i === schedule.length) return schedule[i-1].coords[0];

var t = (d - schedule[i-1].date) / (schedule[i].date - schedule[i-1].date);
  return d3.geo.interpolate(schedule[i-1].coords, schedule[i].coords)(t)[0];
}

var rotateTo;

/////

var width = 960,
    height = 960;

var π = Math.PI,
    radians = π / 180,
    degrees = 180 / π;

var circle = d3.geo.circle()
    .angle(90);

var projection = d3.geo.azimuthalEqualArea()
    .clipAngle(180 - 1e-3)
    .scale(380)
    .translate([width / 2, height / 2])
    .rotate([0,-90])
    .precision(.1);

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

var graticule = d3.geo.graticule();

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

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

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

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

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

d3.json("world-50m.json", function(error, world) {
  if (error) throw error;

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

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

var flight = svg.selectAll('g.flight')
    .data(flights)
    .enter()
    .append('g')
    .classed('flight', true);

flight.append('use')
    .attr('xlink:href', function(d) {
      return '#' + flightKey(d);
    });

flight.append('text')
    .attr('x', function(d) {
      return d3.select('#' + flightKey(d)).node().getTotalLength() / 2;
    })
    .attr('dy', '1.2em')
    .append('textPath')
    .attr('xlink:href', function(d) {
      return '#' + flightKey(d);
    }).text(function(d) { return d.shortDate; });

var city = svg.selectAll('g.city')
    .data(cities)
    .enter()
    .append('g')
    .classed('city', true)
    .attr('transform', function(d) {
      return 'translate('+ projection(d.coords)[0] +','+ projection(d.coords)[1] +')';
    })
    .attr('data-city', function(d) { return d.name; });

city.append('circle').attr('r', 10);

city.append('text')
    .text(function(d) { 
      return d.name; 
    })
    .style('transform', function(d) {
      return 'rotate('+ (180-d.coords[0]) +'deg)';
    })
    .attr('dy', '-.7em');

var night = svg.append("path")
    .attr("class", "night");

rotateTo = function(longitude) {
    projection.rotate([-longitude,-90]);

svg.selectAll('path.graticule').attr('d', path);
    svg.selectAll('path.land').attr('d', path);
    svg.selectAll('path.boundary').attr('d', path);

svg.selectAll('path.flight-def')
      .attr('d', function(d) {
        return path({type: "LineString", coordinates: d.coords});
      });

svg.selectAll('g.city')
      .attr('transform', function(d) {
        return 'translate('+ projection(d.coords)[0] +','+ projection(d.coords)[1] +')';
      });

svg.selectAll('g.city text')
      .style('transform', function(d) {
        return 'rotate('+ (longitude + 180 - d.coords[0]) +'deg)';
      });
  }

d3.timer(function(t) {
    rotateTo(180 + clockScale(new Date()));
    var sun = antipode(solarPosition(new Date));
    night.datum(circle.origin(sun)).attr("d", path);
  });

});

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

function flightKey(d) {
  return d.from.replace(/ /g,'') + d.to.replace(/ /g,'');
}

// ripped straight from https://bl.ocks.org/mbostock/9232962

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>