d3v4 reusable updateable global mashup

.block

license: mit

README.md

This block enters demo mode immediately. Once complete you can open a javascript console to programatically control the globe using the examples below.

D3v3 version here

Javascript Console

Open full screen in a new tab, then from the javascript console:

  globe.g2m();
  globe.m2g();
  globe.g2m().then(() => globe.pause(2000)).then(() => globe.m2g())

  globe.zoom2('Russia');
  globe.rotate2().then(() => globe.zoom2('Canada'))
  globe.bounce2('Chile');
  globe.g2m().then(() => globe.zoom2('Indonesia'));
  globe.duration(3000).m2g();
  globe.coords([150, -150, 150]);

  globe.options({graticule: { width: '1px' }}).update();
  globe.oceans('blue').update();
  globe.options({graticule: { width: '0px' }, geodesic: { width: '1px'}}).update();
  globe.options({geodesic: { width: '0px' }}).update();
  globe.reset();

  globe.duration(800).tour();        // or globe.tour(true, true);  // for bouncy tour
  globe.tour(false);   // stop tour

  globe.spin();
  globe.land('black').oceans('black').surround('black').boundaries('black').cities("#ffba00").update();
  worldFile(); // load topo file which includes Topology, but possibly no name ids
  globe.spin(false);
  globe.land('green').oceans('blue').surround('white').boundaries('white').cities('blue').update();

  globe.reset();
  globe.options({display: {cities: false}}).update();  // animation slows down with too many elements
  globe.zoom2('USA');
  globe.scale(200);  // 200% of default
  occasions();
  globe.options({display: {flows: true}}).update();
  globe.options({world: {surround: 'black'}, display: { stars: 300 }}).update();

  globe.pulse();     // starts the animation for occasions

Inspirations

  1.  http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7  Placing Cities on map
  2.  http://bl.ocks.org/KoGor/7025316                      Globe to map transitions
  3.  http://bl.ocks.org/KoGor/5994804                      Highlighting Countries
  4.  http://bl.ocks.org/enjalot/31168147b88a1748bc8b       User Location
  5.  https://bl.ocks.org/mbostock/9656675                  Zoom to Bounding Box
  6.  https://www.jasondavies.com/maps/zoom/                Zooming in and out
  7.  http://projectsdemo.net/globe/v4/                     Geodesic
  8.  http://bl.ocks.org/jasondavies/4188334                Coloring Neighbors
  9.  http://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition
  10. https://anthonyskelton.com/2016/d3-js-earthquake-visualizations/

forked from TennisVisuals's block: reusable updateable global mashup

all_day.geojson

cities.css

.cities:hover{
	fill: #33CC33;
	stroke-width:0.90em;
	stroke:green;
}

.city-selected{
	animation: pulseSelected 2s infinite linear; -webkit-animation: pulseSelected 2s infinite linear; -moz-animation: pulseSelected 2s infinite linear; -ms-animation: pulseSelected 2s infinite linear; -o-animation: pulseSelected 2s infinite linear; 
	
}

 @keyframes pulseSelected {
  0% {
	fill: rgba(255,222,47,1.00);
	stroke-width:0.5em;
	stroke:#ffd600;
	
  }
  10% {
	fill: rgba(255,222,47,1.00);  
    stroke-width:0.7em;
	stroke:#d3b100;
	
  }
  30% {
	fill: rgba(255,222,47,1.00);  
    stroke-width:0.9em;
	stroke:#9c8300;
	
  }
 
  50% {
	fill: rgba(255,222,47,1.00);  
    stroke-width:0.11em;
	stroke:#5f5000;
	
  }
  70% {
	fill: rgba(255,222,47,1.00); 
    stroke-width:0.13em;
	stroke:#5f5000;
	
  }
  100% {
	  fill: rgba(255,222,47,1.00);
	  stroke-width:0.5em;
      stroke:#ffd600;
      
  }
}

d3.geodesic.js

(function() {
  var φ = 1.618033988749895,
      ρ = 180 / Math.PI;

  var vertices = [
    [1,φ,0], [-1,φ,0], [1,-φ,0], [-1,-φ,0],
    [0,1,φ], [0,-1,φ], [0,1,-φ], [0,-1,-φ],
    [φ,0,1], [-φ,0,1], [φ,0,-1], [-φ,0,-1]
  ];

  var faces = [
    [0,1,4],  [1,9,4],  [4,9,5],  [5,9,3],  [2,3,7],
    [3,2,5],  [7,10,2], [0,8,10], [0,4,8],  [8,2,10],
    [8,4,5],  [8,5,2],  [1,0,6],  [11,1,6], [3,9,11],
    [6,10,7], [3,11,7], [11,6,7], [6,0,10], [9,1,11]
  ].map(function(face) {
    return face.map(function(i) {
      return vertices[i];
    });
  });

  d3.geodesic = {
    multipolygon: function(n) {
      return {
        type: "MultiPolygon",
        coordinates: subdivideFaces(~~n).map(function(face) {
          face = face.map(project);
          face.push(face[0]);
          face = [face];
          return face;
        })
      };
    },
    polygons: function(n) {
      return d3.geodesic.multipolygon(~~n).coordinates.map(function(face) {
        return {type: "Polygon", coordinates: face};
      });
    },
    multilinestring: function(n) {
      return {
        type: "MultiLineString",
        coordinates: subdivideEdges(~~n).map(function(edge) {
          return edge.map(project);
        })
      };
    }
  };

  function subdivideFaces(n) {
    return d3.merge(faces.map(function(face) {
      var i01 = interpolate(face[0], face[1]),
          i02 = interpolate(face[0], face[2]),
          faces = [];

      faces.push([
        face[0],
        i01(1 / n),
        i02(1 / n)
      ]);

      for (var i = 1; i < n; ++i) {
        var i1 = interpolate(i01(i / n), i02(i / n)),
            i2 = interpolate(i01((i + 1) / n), i02((i + 1) / n));
        for (var j = 0; j <= i; ++j) {
          faces.push([
            i1(j / i),
            i2(j / (i + 1)),
            i2((j + 1) / (i + 1))
          ]);
        }
        for (var j = 0; j < i; ++j) {
          faces.push([
            i1(j / i),
            i2((j + 1) / (i + 1)),
            i1((j + 1) / i)
          ]);
        }
      }

      return faces;
    }));
  }

  function subdivideEdges(n) {
    var edges = {};

    subdivideFaces(n).forEach(function(face) {
      add(face[0], face[1]);
      add(face[1], face[2]);
      add(face[2], face[0]);
    });

    function add(p0, p1) {
      var t;
      if (p0[0] < p1[0] || (p0[0] == p1[0] && (p0[1] < p1[1] || (p0[1] == p1[1] && p0[2] < p1[2])))) t = p0, p0 = p1, p1 = t;
      edges[p0.map(round) + " " + p1.map(round)] = [p0, p1];
    }

    function round(d) {
      return d3.format(".2f")(d);
    }

    return d3.values(edges);
  }

  function interpolate(p0, p1) {
    var x0 = p0[0],
        y0 = p0[1],
        z0 = p0[2],
        x1 = p1[0] - x0,
        y1 = p1[1] - y0,
        z1 = p1[2] - z0;
    return function(t) {
      return [
        x0 + t * x1,
        y0 + t * y1,
        z0 + t * z1
      ];
    };
  }

  function project(p) {
    var x = p[0],
        y = p[1],
        z = p[2];
    return [
      Math.atan2(y, x) * ρ,
      Math.acos(z / Math.sqrt(x * x + y * y + z * z)) * ρ - 90
    ];
  }
})();

geoFlow.js

function geoFlow() {

   var data = { countries: { features: [] }, cities: { features: [] }, occasions: { features: [] } };

   var options = {
      id: undefined,
      width: window.innerWidth,
      height: window.innerHeight,
      display: {
         stars:      0,
         cities:     true,
         occasions:  true,
         flows:      false,
         transform:  1.6,
         sizeToFit:  false,    // parent element externally sized
      },
      zoom: {
         northup: true,
         lngLmt:  80,
         time:    1500,
      },
      user: {
         location:      true,
         update:        false,   // updates on load; when true can interrupt transitions
         stroke:        "blue",
         fillOpacity:   0.2,
         fill:          "white"
      },
      world: {
         surround: undefined,
         velocity: [.01, -0],
      },
      map: {
         dragging: true,
         ortho:   true
      },
      cities: {
         "fill": "#1075fe",
         "fillOpacity": 0.5,
         "stroke": "#1075fe",
         "strokeOpacity": 0.2,
      },
      graticule: {
         outline: {
            fill: '#def',
            stroke: '#000',
            width: '0px',
         },
         fill:    '#def', 
         stroke:  '#FFF',
         width:   '0px'
      },
      geodesic: {
         fill:    'none',
         stroke:  '#FFF',
         width:   '0px'
      },
      oceans: {
         fill:    '#def',
      },
      land: {
         focus:   undefined,
         fill:    undefined,
         stroke:  '#fff'
      },
      tour: {
         delay: 1500,
      }
   };

   // consider replacing with an externally definable function
   options.radius = Math.min(options.height * .45, options.width * .45);

   var events = {
      'ready':   null,
      'settings': { 'click': null },
      'update':  { 'begin': null, 'end': null },
      'land':    { 'mouseover': null, 'mouseout': null, 'click': null },
      'city':    { 'mouseover': null, 'mouseout': null, 'click': null },
   };

   var starList = createStars(300);
   var country_names = {};
   var spin_rotation;
   var spin_start;

   var projectionGlobe;
   var projectionGraticule;
   var projectionMap;
   var projection;
   var spacePath;
   var background;
   var geoPath;
   var world;
   var surface;
   var poi;

   var update;

   var user_position;
   navigator.geolocation.getCurrentPosition(function(pos){
      user_position = pos;
      if (typeof update == 'function' && options.user.update) update();
   });

   function globe(selection) {
     selection.each(function () {
         var dom_parent = d3.select(this);

         var color = d3.scaleOrdinal(d3.schemeCategory20);

         world = dom_parent.append("svg")
         background = world.append("g").attr('id', 'space');
         surface = world.append("g").attr('id', 'surface');
         poi = world.append("g").attr('id', 'poi');

         var graticule = d3.geoGraticule();
         var g_outline = surface.append("g")
             .attr("id", "g_outline")
             .append("path")
             .attr("class", "graticule outline path")
            .datum(graticule.outline)

         var oceans = surface.append("g")
            .attr('id', 'oceans')
         var ocean_defs = oceans.append('defs');
         var ocean = ocean_defs.append("path")
            .datum({type: "Sphere"})
            .attr("id", "sphere")
            .attr("class", "sphere ocean path")
         oceans.append("use")
          .attr("class", "sphere")
          .attr("xlink:href", "#sphere");

         var grid = surface.append("g").attr('id', 'graticule');
         var landfeatures = surface.append("g").attr('id', 'land');
         var cityfeatures = poi.append("g").attr('id', 'cities');
         var occasions = poi.append('g').attr('id', 'occasions');

         var g_line = grid.append("path")
             .datum(graticule)
             .attr("class", "graticule line path");

         var gd_line;
         if (d3.geodesic) {
            gd_line = grid.append("path")
               .datum(d3.geodesic.multilinestring(7))
               .attr("class", "graticule path")
         }
	
         update = function(opts) {

            // resize to dimensions of containing element
            if (options.display.sizeToFit || (opts && opts.sizeToFit)) {
               var dims = dom_parent.node().getBoundingClientRect();
               options.width = Math.max(dims.width, 200);
               options.height = Math.max(Math.min(dims.height, window.innerHeight), 200);
            }

            options.radius = Math.min(options.height * .45, options.width * .45);

            world
               // .attr({
               .attrs({
                  'width': options.width,
                  'height': options.height,
               })
               // .style({
               .styles({
                  'background': options.world.surround,
                  'pointer-events': 'all'
               });

            // preserve any prior scale
            if (options.map.ortho) {
               var scale = projection ? projection.scale() : options.radius;
               var scale = opts && opts.sizeToFit ? options.radius : scale;
            } else {
               var scale = projection ? projection.scale() : options.radius / options.display.transform;
               var scale = opts && opts.sizeToFit ? options.radius / options.display.transform : scale;
            }

            var space = d3.geoAzimuthalEquidistant()
               .scale(450)
               .rotate([80,-90,0])
               .center([0, 0]);

            spacePath = d3.geoPath()
               .projection(space)
               .pointRadius(2);

            projectionGlobe = d3.geoOrthographic()
               .scale(scale)
               .center([0, 0])
               .translate([options.width / 2, options.height / 2])
               .clipAngle(90);

            projectionMap = d3.geoEquirectangular()
               .scale(scale)
               .center([0, 0])
               .translate([options.width / 2, options.height / 2])

            // preserve any prior rotation
            var rotation = projection ? projection.rotate() : [0, 0, 0];
            projection = options.map.ortho ? projectionGlobe : projectionMap;
            projection.rotate(rotation);

            geoPath = d3.geoPath().projection(projection);

            ocean
               .attr("d", geoPath)
               .styles({
                  'fill': options.oceans.fill,
                  'stroke': 'none',
                  'stroke-width': '1px',
               });

            g_line
               .attr("d", geoPath)
               .styles({
                 'fill': options.graticule.fill,
                 'stroke': options.graticule.stroke,
                 'stroke-width': options.graticule.width,
               });

            if (d3.geodesic) {
               gd_line
                  .attr("d", geoPath)
                  .styles({
                     'fill': options.geodesic.fill,
                     'stroke': options.geodesic.stroke,
                     'stroke-width': options.geodesic.width,
                  });
            }

            if (rotation[0] == 0 && rotation[1] == 0 && rotation[2] == 0) {
               g_outline
                  .attr("d", geoPath)
                  .styles({
                    'fill': options.graticule.outline.fill,
                    'stroke': options.graticule.outline.stroke,
                    'stroke-width': options.graticule.outline.width
                  });
            }

            var λ = d3.scaleLinear()
               .domain([0, options.width])
               .range([-180, 180]);

            var φ = d3.scaleLinear()
               .domain([0, options.width])
               .range([90, -90]);

            world
             .call(d3.drag()
               .subject(function() { var r = projection.rotate(); return {x: λ.invert(r[0]), y: φ.invert(r[1]) }; })
               .on("drag", function() {
                  if (options.map.dragging) {
                     var lat = λ(d3.event.x);
                     var lng = φ(d3.event.y);
                     lng = lng > options.zoom.lngLmt ? options.zoom.lngLmt : lng < -options.zoom.lngLmt ? -options.zoom.lngLmt : lng;

                     // insure that spinning globe is in sync with this transition
                     spin_rotation = [lat, lng];
                     spin_start = Date.now();

                     projection.rotate([lat, lng]);
                     space.rotate([-lat, -lng]);
                     reDraw();
                  }
               }))

            addLand();
            addCities();
            addStars();
            addOccasions();
            addFlows();
            addUserLocation();
            reDraw();

            function addLand() {
               var land = landfeatures.selectAll("path.countries")
                   .data(data.countries.features)

               land.exit().remove();

               land.enter()
                  .append("path")
                  .attr("class", "countries path")
                  .on("mouseover", events.land.mouseover)
                  .on("mouseout", events.land.mouseout)
                  .on("mousemove", events.land.mousemove)
                  .on("click", events.land.click)
                 .merge(land)
                  .attr("d", geoPath)
                  .styles({ 
                     'fill':     landColor,           // disables CSS functionality
                     'stroke':   options.land.stroke,
                  });

               function landColor(d, i) {
                  if (data.neighbors) {
                     if (d.color) return d.color;
                     return color(d.color = d3.max(data.neighbors[i], function(n) { return data.countries.features[n].color; }) + 1 | 0); 
                  } else {
                     return options.land.fill;
                  }
               }
            }

            function addCities() {

               if (!options.display.cities) {
                  cityfeatures.selectAll("path.cities").remove();
                  return;
               }

               var population_array = data.cities.features.map(function(f) { return f.properties.population; });
               var max_population = population_array.sort(d3.descending)[0];

               if (max_population) {
                  var rMin = 0;
                  var peoplePerPixel = 20000000 / options.radius; // consider making this configurable
                  var rMax = Math.sqrt(max_population / (peoplePerPixel * Math.PI));

                  // var rScale = d3.scale.sqrt();
                  var rScale = d3.scaleSqrt();
                  rScale.domain([0, max_population]);
                  rScale.range([rMin, rMax]);

                  data.cities.features.forEach(function(c) {
                     c.properties.radius = rScale(c.properties.population);
                  });
               }

               var cities = cityfeatures.selectAll("path.cities")
                  .data(data.cities.features)

               cities.exit().remove();

               cities.enter()
                  .append("path")
                  .attr("class", "cities")
                 .merge(cities)
                  .attr("d", pointPath)
                  .styles({
                     "fill": options.cities.fill,
                     "fill-opacity": options.cities.fillOpacity,
                     "stroke": options.cities.stroke,
                     "stroke-opacity": options.cities.strokeOpacity,
                  })
                  .on("click",  function(d, i) {		
                     globe.zoom2(i, 'city');
                     d3.selectAll('.cities').classed('city-selected', false);
                     d3.select(this).classed("city-selected", true);
                  });
            }

            function addOccasions() {

               if (!options.display.occasions || !data.occasions.features.length) {
                  occasions.selectAll('g').remove();
                  return;
               }

               var og = occasions.selectAll('g')
                  .data(data.occasions.features);

               og.exit().remove();

               og.enter().append('g')
                  .attrs({
                     'class': 'occasion',
                     'id': function(d) { return d.id; },
                  })

               var pc = og.selectAll('.pulse-circle')
                  .data(function(d) { return [d]; }, get_key);

               pc.exit().remove();

               pc.enter()
                  .append("path")
                  .attr('class', 'occ pulse-circle')
                 .merge(pc)
                  .style("fill", 'white')
                  .attr("d", pointPath)
                  
               var oc = og.selectAll('.oc-circle')
                  .data(function(d) { return [d]; }, get_key);

               oc.exit().remove();

               oc.enter()
                  .append('path')
                  .attr('class', 'occ oc-circle')
                 .merge(oc)
                  .attr("d", pointPath)
                  .styles({ 
                     "fill" : 'red',
                     'opacity': 0.75,
                  })

               var oct = oc.selectAll('.oct')
                  .data(function(d) { return [d]; }, get_key);

               oct.exit().remove();

               oct.enter().append('title')
                  .attr('class', 'oct')
                 .merge(oct)
                  .text(function(d) {
                     return 'Magnitue ' + d.properties.mag + ' ' + d.properties.place;
                  })
            }

            function addFlows() {

               if (!options.display.flows || !data.occasions.features.length) {
                  cityfeatures.selectAll(".arcPath").remove();
                  return;
               }

               var points = data.occasions.features.map(m => m.geometry.coordinates)
               for (var n = 1, e = points.length, coords = []; ++n < e;) {
                  coords.push({ type: "LineString", coordinates: [points[n-1], points[n]] });
               }

               var arcs = cityfeatures.selectAll(".arcPath")
                  .data(coords);

               arcs.exit().remove();

               arcs
                  .enter()
                  .append("path")
                 .merge(arcs)
                  .attrs({
                     'class': 'arcPath path',
                     'fill': 'none',
                     'stroke': 'red',
                     'stroke-width': '1px'
                  })
                  .attr("d", geoPath)
            }

            function addUserLocation() {
               if (!options.user.location || !user_position) {
                  cityfeatures.selectAll('.userloc').remove();
                  return;
               }

               var coords = [user_position.coords.longitude, user_position.coords.latitude];
               var locations = cityfeatures.selectAll('.userloc')
                  .data([coords]);

               locations.exit().remove();

               locations.enter().append("circle")
                  .attr('class', 'userloc')
                 .merge(locations)
                  .attrs({
                    cx: function(d) { return projection(d)[0] },
                    cy: function(d) { return projection(d)[1] },
                    r: options.radius / 20,    // consider making this configurable
                  })
                  .styles({
                     "stroke": options.user.stroke,
                     "fill-opacity": options.user.fillOpacity,
                     "fill": options.user.fill
                  });
            }

            function addStars() {
               if (!options.display.stars)  {
                  background.selectAll('path').remove();
               }

               var constellations = background.selectAll(".star")
                  .data(starList);

               constellations.exit().remove();

               constellations.enter()
                  .append("path")
                  .attrs({
                     "class": "star",
                     "fill": "white"
                  })
                  .attr("d", function(d){
                      spacePath.pointRadius(d.properties.radius);
                      return spacePath(d);
                  });
            }

         }
     });
   }

   // -------------------------- FUNCTIONS ----------------------------

   var get_key = function(d) { return d && d.key; };

   function animateTransition(interProj) {
      return new Promise(function (resolve, reject) {
        world.transition()
        .duration(2500)
        .tween("projection", function() {
          return function(_) {
            interProj.alpha(_);
            reDraw(true);
          };
        })
        .on('end', resolve);
      });
   }

   var pointPath = function(d, i, data, r) {
      if (d.properties && d.properties.radius != undefined) {
         r = r || d.properties.radius;
      }
      r = r || 1.5;
      var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]];
      var pr = geoPath.pointRadius(globe.scale() / 100 * r);
      var rez = pr({ type: "Point", coordinates: coords });
      return rez;
   }

   var circlePath = function(d) {
      var circle = d3.geo.circle();
      var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]];
      var cc = circle.origin(coords).angle(.5)();
      return geoPath(cc);
   }

   function reDraw() {
      background.selectAll("path").attr("d", spacePath);
      surface.selectAll("path").attr("d", geoPath);
      poi.selectAll(".path").attr("d", geoPath);
      poi.selectAll('.cities').attr('d', pointPath)
      poi.selectAll('.occ').attr('d', pointPath)
      poi.selectAll(".userloc")
         .attr('cx', function(d) { return projection(d)[0] })
         .attr('cy', function(d) { return projection(d)[1] })
   }

   globe.changeFocus = changeFocus;
   function changeFocus(focusID) {
      surface.selectAll("path")
         .classed("focused", function(d, i) { 
            return focusID && d && d.id && d.id == focusID ? options.land.focus = d.id : false; 
         });
   }

   // scale_pct is % of parent element (visible space); won't go below 100;
   globe.scale = function(scale_pct) {
      if (!arguments.length) return +((projection.scale() / options.radius) * 100).toFixed(2);
      var scale = scale_pct / 100 * options.radius;
      return globe.coords(undefined, scale, true);
   }

   globe.coords = function(coords, scale) {
      return new Promise(function (resolve, reject) {
         var current = projection.rotate();

         coords = coords || projection.rotate();
         scale = scale || projection.scale();
         scale = Math.max(options.map.ortho ? options.radius : options.radius / options.display.transform, scale);

         // if already at target coordinates, do nothing; resolve.
         if (current[0] == coords[0] && current[1] == coords[1] && current[2] == coords[2] && scale == projection.scale()) {
            resolve();    
            return;
         }

         // insure that spinning globe is in sync with this transition
         spin_rotation = coords;
         spin_start = Date.now();

         world.transition()
            .duration(options.zoom.time)
            .tween("rotate", function() {
              var r = d3.interpolate(projection.rotate(), coords);
              var s = d3.interpolate(projection.scale(), scale);
              return function(t) {
                projection.rotate(r(t)).scale(s(t));
                reDraw();
              };
            })
            .on('end', resolve);
      });
   };

   globe.g2m = function() { 
      return new Promise(function (resolve, reject) {
         if (!options.map.ortho) {
            globe.rotate2().then(resolve);
            return;
         }
         var current = projection.rotate();
         if (current[0] == 0 && current[1] == 0 && current[2] == 0) {
            transform();
         } else {
            globe.rotate2().then(transform);
         }

         function transform() {
            projection = interpolatedProjection(projectionGlobe, projectionMap, false);
            projection.scale(options.radius / options.display.transform);
            geoPath.projection(projection);
            animateTransition(projection)
               .then(resolve, reject);
            surface.selectAll("path").classed("ortho", options.map.ortho = false);
         }
      });
   }

   globe.m2g = function() { 
      return new Promise(function (resolve, reject) {
         if (options.map.ortho) {
            globe.rotate2().then(resolve);
            return;
         }
         var current = projection.rotate();
         if (current[0] == 0 && current[1] == 0 && current[2] == 0) {
            transform();
         } else {
            globe.rotate2().then(transform);
         }

         function transform() {
            projection = interpolatedProjection(projectionMap, projectionGlobe, true);
            projection.scale(options.radius);
            geoPath.projection(projection);
            animateTransition(projection)
               .then(resolve, reject);
            surface.selectAll("path").classed("ortho", options.map.ortho = true);
         }
      })
   }

   globe.snap2 = function(coords, scale) {
     coords = coords || [0, 0, 0];
     scale = scale || options.radius;
     projection.rotate(coords).scale(scale);
     reDraw();
   }

   globe.rotate2 = function(coords) {
      coords = coords || [0, 0, 0];
      return globe.coords(coords, options.map.ortho ? options.radius : options.radius / options.display.transform);
   }

   globe.reset = function() {
      return new Promise(function (resolve, reject) {
         globe.spin(false);
         globe.tour(false);
         changeFocus(undefined);
         globe.rotate2()
            .then(finish, reject)

         function finish() {
            globe.update({sizeToFit: true});
            resolve();
         }
      });
   }

   globe.pause = function(time) {
      return new Promise(function (resolve, reject) {
         setTimeout(function() { resolve(); }, time); 
      });
   }

   globe.bounce2 = function(what, which) {
      return new Promise(function (resolve, reject) {
         globe.rotate2().then(function() { globe.zoom2(what, which).then(resolve, reject); }, reject)
      });
   }

   var tour_countries;
   // start can specify first country or false to terminate tour
   globe.tour = function(start, bounce) {
      start = start == undefined ? true : start;
      return new Promise(function (resolve, reject) {
         if (!start) {
            tour_countries = [];
            return resolve();
         }
         tour_countries = Object.keys(country_names).sort();
         if (typeof start == 'string') {
            var index = tour_countries.indexOf(start);
            if (index >= 0) {
               tour_countries = tour_countries.slice(index).concat(tour_countries.slice(0, index)).reverse();
            } else {
               tour_countries.reverse();
            }
         }

         nextCountry();

         function nextCountry() {
            if (!tour_countries.length) { return resolve(); }
            country = tour_countries.pop();

            if (!country) {
               nextCountry();
            } else {
               console.log(country);
               if (bounce) {
                  globe.bounce2(country)
                     .then(delayNext, reject);
               } else {
                  globe.zoom2(country, undefined, false)
                     .then(delayNext, reject);
               }
            }
         }

         function delayNext(result) { 
            setTimeout(function() { nextCountry(); }, options.tour.delay); 
         }
      });
   }

   globe.zoom2 = function(what, which, zoom) {
      return new Promise(function (resolve, reject) {
         which = which || 'country';
         zoom = zoom == undefined ? true : zoom;
         var coords = [0, 0, 0];
         var scale = options.radius;

         if (!isNaN(what) && what < data.countries.features.length && which == 'country') {
            coords = d3.geoCentroid(data.countries.features[what]).map(function(m) { return -1 * m; });
            changeFocus(undefined);
         } else if (!isNaN(what) && what < data.cities.features.length && which == 'city') {
            coords = d3.geoCentroid(data.cities.features[what]).map(function(m) { return -1 * m; });
            changeFocus(undefined);
         } else if (Object.keys(country_names).indexOf(what) >= 0) {
            coords = d3.geoCentroid(country_names[what]).map(function(m) { return -1 * m; });
            var b = d3.geoBounds(country_names[what]);
            var dx = b[1][0] - b[0][0];
            var dy = b[1][1] - b[0][1];
            var x = (b[0][0] + b[1][0]) / 2;
            var y = (b[0][1] + b[1][1]) / 2;
            bbox = .1 / Math.max(dx / options.width, dy / options.height);
            scale = zoom ? options.radius * bbox : options.radius;
						scale = Math.max(scale, options.radius);
            changeFocus(country_names[what].id);
         } else {
            changeFocus(undefined);
         }

         if (options.zoom.northup && coords.length == 2) coords.push(0);
         globe.coords(coords, scale)
            .then(resolve, reject);
      });
   }

   function interpolatedProjection(a, b, ortho) {
     // var projection = d3.geo.projection(raw).scale(1),
     var projection = d3.geoProjection(raw).scale(1),
         center = projection.center,
         translate = projection.translate,
         clip = projection.clipAngle,
         α;

     function raw(λ, φ) {
       var pa = a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = b([λ, φ]);
       return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]];
     }

     projection.alpha = function(_) {
       if (!arguments.length) return α;
       α = +_;
       var ca = a.center(), cb = b.center(),
           ta = a.translate(), tb = b.translate();
       center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]);
       translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]);
       if (ortho === true) {clip(180 - α * 90);}
       return projection;
     };

     projection.alpha(0).scale = b.scale;
     delete projection.translate;
     delete projection.center;
     return projection.alpha(0);
   }

   globe.update = function(opts) {
     if (events.update.begin) events.update.begin(); 
     if (typeof update === 'function') update(opts);
     if (events.update.end) events.update.end(); 
   }

   // allows updating individual options and suboptions
   // while preserving state of other options
   globe.options = function(values) {
       if (!arguments.length) return options;
       keyWalk(values, options);
       return globe;
   }

   function keyWalk(valuesObject, optionsObject) {
       if (!valuesObject || !optionsObject) return;
       var vKeys = Object.keys(valuesObject);
       var oKeys = Object.keys(optionsObject);
       for (var k=0; k < vKeys.length; k++) {
          if (oKeys.indexOf(vKeys[k]) >= 0) {
             var oo = optionsObject[vKeys[k]];
             var vo = valuesObject[vKeys[k]];
             if (typeof oo == 'object' && typeof vo !== 'function' && oo.constructor !== Array) {
                keyWalk(valuesObject[vKeys[k]], optionsObject[vKeys[k]]);
             } else {
                optionsObject[vKeys[k]] = valuesObject[vKeys[k]];
             }
          }
       }
   }

   globe.events = function(functions) {
        if (!arguments.length) return events;
        keyWalk(functions, events);
        return globe;
   }

   globe.width = function(value) {
       if (!arguments.length) return options.width;
       options.width = value;
       return globe;
   };

   globe.height = function(value) {
       if (!arguments.length) return options.height;
       options.height = value;
       return globe;
   };

   globe.neighbors = function(neighbors) {
      if (!arguments.length) return data.neighbors;
      if (!neighbors || typeof neighbors != 'object' || !neighbors.length) return globe;
      data.neighbors = neighbors;
      return globe;
   }

   function geometryTypes(features) {
      types = [];
      for (element in features) { 
         var type = features[element].geometry.type; 
         if (types.indexOf(type) < 0) types.push(type);
      }
      return types;
   }

   globe.data = function(new_data) {
      if (!arguments.length) return data;
      if (!new_data || typeof new_data != 'object') return globe;

      if (new_data.type == 'Topology') {
         var countries = topojson.feature(new_data, new_data.objects.countries);
         globe.neighbors(topojson.neighbors(new_data.objects.countries.geometries));
         if (!countries.features) return globe;
         data.countries = countries;
         data.countries.features.forEach(function(c) { country_names[c.properties.name] = c; });
      } else if (new_data.type == 'FeatureCollection') {
         var elements = new_data
         if (!elements.features) return globe;
         var feature_types = geometryTypes(elements.features);
         if (feature_types.indexOf('Polygon') >= 0 || feature_types.indexOf('MultiPolygon') >=0) {
            data.countries = elements;
            data.countries.features.forEach(function(c) { country_names[c.properties.name] = c; });
         } else if (feature_types.length == 1 && feature_types.indexOf('Point') >= 0) {
            data.cities = elements;
         }
      }
      return globe;
   }

   globe.occasions = function(new_occasions) {
      if (!arguments.length) return data.occasions;
      data.occasions = new_occasions;
      return globe;
   }

   globe.duration = function(time) {
      if (!arguments.length) return options.zoom.time;
      options.zoom.time = time;
      return globe;
   }

   // both graticule fill, outline fill, and a sphere are used in an attempt to
   // maintain consistent background color during transitions...
   globe.oceans = function(color) {
      if (!arguments.length) return options.oceans.fill;
      options.oceans.fill = color;
      options.graticule.fill = color;
      options.graticule.outline.fill = color;
      return globe;
   }

   // set color to 'undefined' to re-enable CSS functionality
   globe.land = function(color) {
      if (!arguments.length) return options.land.fill;
      options.land.fill = color;
      return globe;
   }

   globe.boundaries = function(color) {
      if (!arguments.length) return options.land.stroke;
      options.land.stroke = color;
      return globe;
   }

   globe.cities = function(color) {
      if (!arguments.length) return options.cities.fill;
      options.cities.fill = color;
      options.cities.stroke = color;
      return globe;
   }

   globe.surround = function(color) {
      if (!arguments.length) return options.world.surround;
      options.world.surround = color;
      return globe;
   }

   globe.initialize = function(error, world, cities) {
      if (error) { return error; }

      globe.data(world);
      globe.data(cities);
      update();
      if (typeof events.ready == 'function') events.ready();
   }

   var spin_timer;
   globe.spin = function(spin){
      spin = spin == undefined ? true : spin;

      spin_rotation = projection.rotate();
      spin_start = Date.now();
      if (spin) {
         spin_timer = d3.timer(function() {
            var dt = Date.now() - spin_start;
            projection.rotate([spin_rotation[0] + options.world.velocity[0] * dt, spin_rotation[1] + options.world.velocity[1] * dt]);
            reDraw();
         });
      } else if (spin_timer) {
         spin_timer.stop();
         spin_timer = undefined;
      }
   }

   globe.pulse = function() {
      poi.selectAll('.pulse-circle')
         .attr("d", function(d) { return pointPath(d, 0, 0, 0); })
         .style("fill-opacity", 1)
         .transition()
         .delay(function(d, i) { return i * 200; })
         .duration(3000)
         .style("fill-opacity", 0)
         .attrTween("d", function(d) {
           rinterp = d3.interpolate(0, 10);
           var fn = function(t) {
             d.r = rinterp(t);
             return pointPath(d, 0, 0, d.r) || 'M0,0';
           };
           return fn;
         });
   }

   globe.flow = function() {
      d3.selectAll('.arcPath')
            .transition()
            .ease('linear')
            .duration(750)
            .attrTween("stroke-dashoffset", function() {
              return d3.interpolate(16, 0);
            })
            .each("end", globe.flow);
   }

   function createStars(number){
      var data = [];
      for(var i = 0; i < number; i++){
          data.push({
              geometry: {
                  type: 'Point',
                  coordinates: randomLonLat()
              },
              type: 'Feature',
              properties: {
                  radius: Math.random() * 1.5
              }
          });
      }
      return data;
   }

   function randomLonLat(){
      return [Math.random() * 360 - 180, Math.random() * 180 - 90];
   }

   return globe;
}

geonames_cities_100k.geojson

gfDemo.js

demo = function(tasks) {
   tasks.reverse();
   return new Promise(function (resolve, reject) {
      if (!tasks) return reject();

      nextTask();

      function nextTask() {
         if (!tasks.length) { 
            return resolve(); 
         }

         var task = tasks.pop();
         if (!task || !task.fx || !task.params) {
            nextTask();
         } else {
            // var i = task.fx(...task.params);  // not supported for mobile
            var i = task.fx.apply(this, task.params);
            if (Promise.resolve(i) == i) {
               i.then(nextTask, reject);
            } else {
               delayNext(task.delay);
            }
         }
      }

      function delayNext(delay) { 
         setTimeout(function() { nextTask(); }, delay); 
      }

   });
}

index.html

<!DOCTYPE html>
<html>
<head>
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<title>geoFlow</title>
</head>
<style>

.landTooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
  padding: 5px;
  text-align: left;
  border: solid #ccc 1px;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}

.countries {
  fill: #aaa;
}

.focused {
  fill: #22DD22;
}

.countries:hover {
   fill:#FFCC11;
   stroke-width: 1px;
}

.wrapper, html, body {
   min-height: 100%;
   height:100%;
   margin:0;
}

.wrapper {
   display: flex;
   flex-direction: column;
}

#world {
   flex: 1 1;
}

/* works but very choppy */
.flowPath {
  fill: none;
  opacity: 0.5;
  stroke-width: 1;
  stroke-miterlimit: 10;
  stroke-dasharray: 12, 4;
}

.arcPath {
  fill: none;
  opacity: 0.5;
  stroke-width: 1;
  stroke-dasharray: 10, 4;
  animation: flow 1s linear infinite;
  -webkit-animation: flow 1s linear infinite;
}

@keyframes flow {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

@-webkit-keyframes flow {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

</style>
<body>
   <div class="wrapper" id="cosmos">
      <div id="world"></div>
   </div>
</body>
<link rel="stylesheet" type="text/css" href="cities.css" />

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="d3.geodesic.js"></script>
<script src="geoFlow.js"></script>
<script src="gfDemo.js"></script>

<script>
   globe = geoFlow();
   d3.select('#world').call(globe);

   var landTooltip = d3.select("body").append("div").attr("class", "landTooltip");

   function landMouseOver(d) {
      if (d.properties.name) {
         landTooltip.text(d.properties.name)
            .styles({
               "left":     (d3.event.pageX + 7) + "px",
               "top":      (d3.event.pageY - 15) + "px",
               "display":  "block",
               "opacity":  1,
            })
      }
   }

   function landMouseMove(d) {
      landTooltip
         .styles({
            "left": (d3.event.pageX + 7) + "px",
            "top": (d3.event.pageY - 15) + "px",
         })
   }

   function landMouseOut(d) {
      landTooltip
         .styles({
            "opacity": 0,
            "display": "none",
         })
   }

   function landMouseClick(d) {
      var current_focus = globe.options().land.focus;
      var new_focus = current_focus == d.id ? undefined : d.id;
      globe.changeFocus(new_focus);
      globe.options({ land: { focus: new_focus }}).update();
   }

   function runDemo() {
      demo(tasks);
   }

   globe.events({
      'ready': runDemo,
      'land': { 
         'mouseover': landMouseOver, 
         'mousemove': landMouseMove, 
         'mouseout':  landMouseOut, 
         'click':     landMouseClick, 
      },
   });

   window.addEventListener( 'resize', onWindowResize, false );

   queue()
      .defer(d3.json, "world-countries.json")
      .defer(d3.json, "geonames_cities_100k.geojson")
      .await(globe.initialize);

   function onWindowResize() {
      globe.update({sizeToFit: true});
   }

   worldFile = function(file) {
      file = file || "world-110m.json";
      d3.json(file, function(error, land) {
         globe.data(land).update();
      });
   }

   occasions = function() {
      return new Promise(function (resolve, reject) {
         // d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(error, data) {
         d3.json('all_day.geojson', function(error, data) {
            if (!error) {
               globe.occasions(data).update();
               globe.update();
               globe.pulse();
               resolve();
            } else {
               reject(error);
            }
         });
      });
   }

   var tasks = [
      { fx: globe.g2m, params: [], delay: undefined },
      { fx: globe.m2g, params: [], delay: undefined },
      { fx: globe.zoom2, params: ['Russia'], delay: undefined },
      { fx: globe.zoom2, params: ['Canada'], delay: undefined },
      { fx: globe.bounce2, params: ['Chile'], delay: undefined },
      { fx: globe.g2m, params: [], delay: undefined },
      { fx: globe.zoom2, params: ['Indonesia'], delay: undefined },
      { fx: globe.duration, params: [3000], delay: 0 },
      { fx: globe.m2g, params: [], delay: undefined },

      { fx: globe.options, params: [{graticule: { width: '1px' }}], delay: 0 },
      { fx: globe.oceans, params: ['blue'], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },
      { fx: globe.coords, params: [[150, -150, 150]], delay: undefined },
      { fx: globe.options, params: [{graticule: { width: '0px' }, geodesic: { width: '1px'}}], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },
      { fx: globe.reset, params: [], delay: undefined },
      { fx: globe.options, params: [{geodesic: { width: '0px' }}], delay: 0 },

      { fx: globe.land, params: ['black'], delay: 0 },
      { fx: globe.oceans, params: ['black'], delay: 0 },
      { fx: globe.surround, params: ['black'], delay: 0 },
      { fx: globe.boundaries, params: ['black'], delay: 0 },
      { fx: globe.cities, params: ['#ffba00'], delay: 0 },
      { fx: globe.update, params: [], delay: 500 },
      { fx: globe.spin, params: [], delay: 5000 },
      { fx: worldFile, params: [], delay: 3000 },
      { fx: globe.spin, params: [false], delay: 1000 },

      { fx: globe.land, params: ['green'], delay: 0 },
      { fx: globe.oceans, params: ['blue'], delay: 0 },
      { fx: globe.surround, params: ['white'], delay: 0 },
      { fx: globe.boundaries, params: ['white'], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },

      { fx: globe.options, params: [{display: {cities: false}}], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },
      { fx: globe.zoom2, params: ['USA'], delay: undefined },
      { fx: globe.scale, params: [200], delay: undefined },
      { fx: occasions, params: [], delay: undefined },
      { fx: globe.update, params: [], delay: 10000 },
      { fx: globe.options, params: [{display: {flows: true} }], delay: 0 },
      { fx: globe.update, params: [], delay: 5000 },
      { fx: globe.options, params: [{world: {surround: 'black'}, display: { stars: true }}], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },
      { fx: globe.reset, params: [], delay: 4000 },
      { fx: globe.options, params: [{display: {flows: false} }], delay: 0 },
      { fx: globe.update, params: [], delay: 0 },
   ]; 

</script>
</script>
</html>

thumbnail.png

world-110m.json

world-countries.json