<div id="terrestrial-globe-default"></div>
<div id="terrestrial-globe-rotation"></div>

<script>
  d3.json('../dist/maps/world.topo.json', function (topojson) {
    d3.json('../data/world-countries-population.json', function (data) {
      d3.terrestrialGlobe(data, {
        id: 'terrestrial-globe-default',
        map: {
          key: 'name',
          name: 'world',
          data: topojson,
          object: 'countries',
          center: [103.3886, 35.5636]
        }
      });
      d3.terrestrialGlobe([], {
        id: 'terrestrial-globe-rotation',
        map: {
          key: 'name',
          name: 'world',
          data: topojson,
          object: 'countries'
        },
        graticules: {
          show: true
        },
        rotation: {
          autoplay: true,
          velocity: [0.01, 0.02, 0.03]
        },
        regions: {
          show: false
        }
      });
      d3.choroplethMap(data, {
        id: 'terrestrial-globe-rotation',
        standalone: false,
        map: {
          key: 'name',
          name: 'world',
          data: topojson,
          object: 'countries',
          rotate: [-103.3886, -35.5636],
          scale: 0.5
        },
        regions: {
          stroke: '#fff'
        },
        projection: 'geoOrthographic',
        coloring: 'topological'
      });
    });
  });
</script>