geoFlow
✓ Published0🌍 Public
TTennisVisuals
Last edited Oct 31, 2016
Created on Oct 25, 2016
A customizable, animated D3.js globe visualizes geographic data, transitioning smoothly between orthographic and map projections. It renders country boundaries, graticules, geodesic arcs, and city markers using SVG paths, with options to spin, zoom, and focus on specific countries. The visualization loads city populations from GeoJSON and can display earthquake data from a USGS feed, while a JavaScript console offers programmatic control through chained animation methods.
AI-generated descriptionThis 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. 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/
mit Licensed