All examples By author By category About

dwtkns

Full window Github gist

Sun and Earth

Experiments faking 3d rotation of a globe and sun in SVG. Illusion is helped by dynamic gradients, two nested orthographic projections, scaling the sun circle's radius based on distance from the 'camera', and toggling a clipping mask that makes the sun appear to move "behind" the earth.

Based on Mike Bostock's Solar Terminator and this past experiment.

This example stems from drafts of maps for Norway the Slow Way. Also see Mike's Pencil Sketch example.

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

svg { stroke-linejoin: round; }

.shell {
  width:960px;
  position:relative;
}
.tally { 
  width:100%;
  margin: 0 auto;
  text-align:center;
  font-family: sans-serif;
  color:#bbb;
  position: absolute;
  top: 60px;

}

/*map*/
.horizon {
  fill: none;
  stroke: #eee;
  opacity: 0.5;
  stroke-width: 2px;
}

.ocean {
  fill: url(#oceanGradient);
}

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

.land {
  stroke-opacity:0;
  stroke: #2e414c;
  stroke-width: .5px;

fill: #fcfcff;
  fill-opacity:1;
}

.land.thickhalo {
  opacity: 1;
  fill:none;
  
  stroke-opacity:0.04;
  stroke: #2e414c;
  stroke-width: 8px;
}

.land.thinhalo {
  opacity: 1;
  fill:none;
  
  stroke-opacity:0.1;
  stroke: #2e414c;
  stroke-width: 2.5px;
}

.night {
  stroke: none;
  stroke-width: 3px;
  stroke-opacity: 0.5;

fill: #1f2a33;
  fill: url(#nightGradient);
}

.sun {
  fill: url(#sunGradient);
  stroke: #ffc800;
  stroke-opacity:0.2;
  transition:fill .3s, stroke .3s;
}

.sun {
  mask: url(#globeMask);
}

/* */

#globeMask rect { fill: #fff; }

/* 
  the opacity of the mask's circle 
  determines whether the shape of the globe
  shows up in the opacity mask or not

so, by 'toggling' the circle as part of the mask
  we can choose when to occlude an element using
  the globe's shape, creating a false 3d effect 
  when an element passes 'behind' the globe.

the globeMaskCircle's fill color determines the extent to which
  it masks out the things 'behind' it. #000 = fully hidden
*/
#globeMaskCircle { 
  fill: #000; 
  opacity: 0;
}

#globeMaskCircle.behind {
  opacity: 1;
}
</style>

<body>

var mapW = 960,
    mapH = 500;

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

var parseDate = d3.time.format("%Y-%m-%d-%H-%Z").parse,
    logDate = d3.time.format("%B %e");

// map setup

var earth = d3.geo.orthographic()
    .scale(0.25 *mapH)
    .translate([mapW /2, mapH /2])
    .clipAngle(90)
    // .rotate([-8, -61, 0])
    .rotate([10, 150, 23.4])
    .precision(.1);

var sky = d3.geo.orthographic()
    .scale(0.49 *mapH)
    .translate(earth.translate())
    .clipAngle(earth.clipAngle())
    .rotate(earth.rotate())
    .precision(earth.precision());

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

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

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

var graticule = d3.geo.graticule();

var svg = d3.select("svg")
    .attr('class','map')
    .attr("width", mapW)
    .attr("height", mapH)
    .attr('viewBox', '' + 0 + ' ' + 0 + ' ' + mapW + ' ' + mapH );

var defs = svg.append("defs");

var sunScale = d3.scale.linear().domain([0,1]).range([5,25]);

var jun6 = parseDate('2014-06-01-00--0000');

// read data files
queue()
    .defer(d3.json, "/d/4090846/world-110m.json")
    .await(ready);

function ready(error, world) {

var num = 0;
var start = earth.rotate();

d3.timer(function() {
  var dt = addMinutes(jun6,num);

d3.select('.tally').text(logDate(dt))

var newRot = [
    (num/1440/0.8)+start[0],
    start[1],
    start[2]
  ];

earth.rotate(newRot);
  sky.rotate(newRot)

redraw(dt)
  
  num+=1440; // increment time in minutes (1440 = 1 day)
});

buildDefs();
buildGlobe();

function buildDefs() {
  // draw map
  defs.append("path")
      .datum({type: "Sphere"})
      .attr("id", "sphere")
      .attr("d", path);

defs.append("clipPath")
      .attr("id", "clip")
    .append("use")
      .attr("xlink:href", "#sphere");

var globeMask = defs.append('mask')
      .attr('id','globeMask')
      .attr('x',0).attr('y',0)
      .attr('width',mapW)
      .attr('height',mapH)
  
  globeMask.append('rect')
      .attr('x',0).attr('y',0)
      .attr('width',mapW)
      .attr('height',mapH)

globeMask.append('use')
      .attr('id','globeMaskCircle')
      .attr("xlink:href", "#sphere");

var sunGradient = defs.append("radialGradient")
    .attr("id", "sunGradient")
    .attr("cx", "75%")
    .attr("cy", "25%");
  
  sunGradient.append("stop").attr("offset", "5%"  ).attr("stop-color", "#fffffa");
  sunGradient.append("stop").attr("offset", "150%").attr("stop-color", "#fdf2ce");

var oceanGradient = defs.append("radialGradient")
    .attr("id", "oceanGradient")
    .attr("cx", "75%")
    .attr("cy", "25%");

oceanGradient.append("stop").attr("offset", "5%"  ).attr("stop-color", "#fff");
  oceanGradient.append("stop").attr("offset", "150%").attr("stop-color", "#d4dfe8");

var nightGradient = defs.append("radialGradient")
    .attr("id", "nightGradient")
    .attr("r", "110%")
    .attr("cx", "75%")
    .attr("cy", "25%");

nightGradient.append("stop").attr("offset", "0%"  ).attr("stop-color", "rgba(31, 42, 51,0.3)");
  nightGradient.append("stop").attr("offset", "100%").attr("stop-color", "rgba(31, 42, 51,0.0)");
  
}

function buildGlobe() {
  var landMasses = topojson.feature(world, world.objects.land);

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

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

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

svg.append("path")
    .datum(landMasses)
    .attr("class", "land thickhalo");

svg.append("path")
    .datum(landMasses)
    .attr("class", "land thinhalo");

svg.append("path")
    .datum(landMasses)
    .attr("class", "land");

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

d3.selectAll('.land, .night')
    .attr("clip-path", "url(#clip)");

svg.append('circle').datum([])
    .attr('class','sun');
}

function redraw(date) {
  date = date || new Date;

var night = d3.selectAll('.night'),
      sunshine = d3.selectAll('.sun'),
      globeMaskCircle = d3.selectAll('#globeMaskCircle');

var sunPos = solarPosition(date),
      antiSunPos = antipode(sunPos);

var noon = {
    earth: earth(sunPos),
    sky:   sky(sunPos)
  }
  var midnight = {
    earth: earth(antiSunPos),
    sky:   sky(antiSunPos)
  }
  
  night.datum(circle.origin(antiSunPos)).attr("d", path);

d3.select('#nightGradient')
  /*
    this nastiness roughly calculates gradient center as a % of the shape it's being applied to
    based on where the projected sun 'location' falls within the viewport.
  */
    .attr('cx', ((midnight.earth[0]-(mapW-mapH)/2)/mapH*100)+'%')
    .attr('cy', (midnight.earth[1]/mapH*100)+'%')

d3.select('#oceanGradient')
    .attr('cx', ((noon.earth[0]-(mapW-mapH)/2)/mapH*100)+'%')
    .attr('cy', (noon.earth[1]/mapH*100)+'%')

var sunSizeFactor = 1-(degrees_from_center(sunPos)/180);

sunshine
    .attr("cx", noon.sky[0])
    .attr("cy", noon.sky[1])
    .attr('r', sunScale(sunSizeFactor));

d3.selectAll('.land').attr('d',path);
  d3.selectAll('.graticule').attr("d", path);

globeMaskCircle
    .classed('behind',function(){
      // "behindGlobe" meaning 'appearing more distant from the viewer than the globe'
      return isSunBehindGlobe = degrees_from_center(sunPos) > 90 ? true : false;;
    })

}

function degrees_from_center(d) {
  var distanceBetween = d3.geo.distance,
      centerPos = [
        -earth.rotate()[0],
        -earth.rotate()[1]
      ];

return distanceBetween(d,centerPos)*degrees;
}

function fade_at_edge(d) {
  var sunPos    = d;
      
  // distance in degrees from centerpoint of globe rotation
  // to pt "underneath" the sun
  var distance = degrees_from_center(sunPos)
  
  // degrees on either side of 90 during which fading of the revolving 'sun' happens
  var fade_range = 10;

var fade = d3.scale.linear()
    .domain([90+fade_range,90-fade_range])
    .range([0.1,1]) // opacity range
    .clamp(true) 
  
  return fade(distance)
}

// https://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object
function addMinutes(date, minutes) {
    return new Date(date.getTime() + minutes*60000);
}

// from https://bl.ocks.org/mbostock/4597134

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js