d3v4 reusable updateable global mashup

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.  /patrickstotz/1f19b3e4cb848100ffd7  Placing Cities on map
  2.  /kogor/7025316                      Globe to map transitions
  3.  /kogor/5994804                      Highlighting Countries
  4.  /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.  /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

forked from TennisVisuals's block: d3v4 reusable updateable global mashup

forked from anonymous's block: d3v4 reusable updateable global mashup

<!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" />

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 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>

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

https://d3js.org/d3-selection-multi.v1.min.js

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

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

https://d3js.org/d3-timer.v1.min.js