D3 Examples - d3v4 reusable updateable global mashup

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.

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/

xxxxxxxxxx
 
<!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>
​
    