D3 Examples - Test 4

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
​
  <title>Zoom and Rotating (Reprojecting)</title>
​
<!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
  
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js"></script>
  <script src="https://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
  
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script type="text/javascript">
    
    
    AFRAME.registerComponent('draw-canvas', {
          schema: {default: ''},
          init: function () {
            var canvas = document.getElementById("map-container");
            var context = canvas.getContext('2d');
//             this.canvas = document.getElementById(this.data);
//             this.ctx = this.canvas.getContext("2d");
            // Draw on canvas...
            
​
​
//  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//  <script type="text/javascript" src="jquery.svg.js"></script>
<!-- // Getting and manipulating the SVG Canvas: https://keith-wood.name/svg.html.
//           } -->
        
    </script>
</head>
<body>
​
  <style>
  body {
    margin: 0;
  }
​
  svg {
    background-color: #A7DBD8;
  }
​
  .sphere {
    fill: #A7DBD8;
    stroke: #79A09E;
  }
​
  .land {
    fill: #E0E4CC;
    stroke: #ACAF9F;
    stroke-width: 1;
  }
​
  .graticule {
    fill: none;
    stroke: #79A09E;
    stroke-width: 1;
    stroke-dasharray: 1,2;
  }
​
  .label {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 11px;
    fill: #777;
  }
  </style>
​
  <div id="map-container">
    <canvas id='container'></canvas>
  </div>
  
  
  
  <a-scene>
      <a-assets id="map-container" >
        <canvas id="container" crossorigin="anonymous"></canvas>
      </a-assets>
​
      <a-entity geometry="primitive:plane;height:9;width:16" position="0 5 -16" material="src: #container; side: double" draw-canvas="container">
        <a-entity id="container1" style="position: fixed; width: 80%; max-height: 450px;"></a-entity>
        </a-entity>
​
        <a-entity geometry="primitive:sphere; radius: 4" position="-6 90 -14" rotation="0 0 20" material="src: #container; transparent: true" draw-canvas="container"></a-entity>
​
      <a-box position="6 5 -15" depth="5" height="4" width="4" color="tomato"></a-box>
    
      <!-- Camera with customized cursor -->
     
      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      <a-light color="#fff" position="0 5 0" type="ambient"></a-light>
        <a-entity camera look-controls wasd-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
        </a-entity>
        <a-entity light="type: point; color: #EEE; intensity: 0.5" position="0 3 0"></a-entity>
    
      
​
      <!-- Sky -->
      <a-sky color="#464b51"></a-sky>
    </a-scene>
​
  <script>
       //basic map config with custom fills, mercator projection
      var map = new Datamap({
        scope: 'world',
        element: document.getElementById('container1'),
        projection: 'mercator',
        height: 500,
        fills: {
          defaultFill: '#f0af0a',
          lt50: 'rgba(0,244,244,0.9)',
          gt50: 'red'
        },
        
        data: {
          USA: {fillKey: 'lt50' },
          RUS: {fillKey: 'lt50' },
          CAN: {fillKey: 'lt50' },
          BRA: {fillKey: 'gt50' },
          ARG: {fillKey: 'gt50'},
          COL: {fillKey: 'gt50' },
          AUS: {fillKey: 'gt50' },
          ZAF: {fillKey: 'gt50' },
          MAD: {fillKey: 'gt50' }       
        }
      })
      
      
      //sample of the arc plugin
      map.arc([
       {
        origin: {
            latitude: 40.639722,
            longitude: 73.778889
        },
        destination: {
            latitude: 37.618889,
            longitude: -122.375
        }
      },
      {
          origin: {
              latitude: 30.194444,
              longitude: -97.67
          },
          destination: {
              latitude: 25.793333,
              longitude: -0.290556
          }
      }
      ], {strokeWidth: 2});
       
      
       //bubbles, custom popup on hover template
     map.bubbles([
       {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
       {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
       {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
​
     ], {
       popupTemplate: function(geo, data) {
         return "<div class='hoverinfo'>It is " + data.name + "</div>";
       }
     });
     </script>
​
</body>
</html>
​
    