D3 Examples - Test 3

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://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js"></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="background-color:black">
​
  <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>
​
        <a-entity geometry="primitive:sphere; radius: 4" position="-6 0 -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-camera position="0 1.8 0" cursor-visible="true" cursor-scale="2" cursor-color="#4CC3D9" cursor-offset="2" cursor-maxdistance="100" cursor-opacity="0.5" cursor-fuse="true"></a-camera>
      <a-light color="#fff" position="0 5 0" type="ambient"></a-light>
        <a-entity camera look-controls wasd-controls></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>
​
    // Set the dimensions of the map
    var width  = 1920, // original === 960 x480
        height = 1080,
        speed = 1e-2;
​
    // Create a selection for the container div and append the svg element
    var div = d3.select('#map-container'),
        canvas = div.select('canvas#container'),
        context = canvas.node().getContext("2d");
​
    canvas
      .attr('width', width / 2)
      .attr('height', height / 2.2);
​
    // Create and configure a geographic projection
    var projection = d3.geoEquirectangular()// v3 === d3.geo.orthographic()
//       .scale(height / 2)  // old === .scale(height / 2)
//       .clipAngle(90)
//       .translate([width, height]) // old === ([width / 2, height / 2])
      .precision(0.1);
​
    // Create and configure a path generator
    var pathGenerator = d3.geoPath() // v3 === d3.geo.path()
      .projection(projection)
      .context(context);
​
    // Create and configure the graticule generator (one line every 20 degrees)
    var graticule = d3.geoGraticule();  // v3 === d3.geo.graticule()
​
    // Retrieve the geographic data asynchronously
    d3.json('ne_110m_admin_0_sovereignty.geojson', function(err, data) {
​
      // Throw errors on getting or parsing the file
      if (err) { throw err; }
​
      
      
      // Background
      context.fillStyle = '#EF8354';
      context.fillRect(0, 0, 960, 480);
​
      // Rotate the globe
      d3.timer(function(elapsed) {
​
//         projection.rotate([speed * elapsed, 0, 0]);
​
        // Canvas Drawing
        context.clearRect(0, 0, width, height);
​
        // Sphere
        context.beginPath();
//         pathGenerator({type: 'Plane'});
//         context.strokeStyle = "#EF8354";
//         context.stroke();
//         context.fillStyle = '#BFC0C0';
//         context.fill();
​
        // Graticule
        context.beginPath();
        pathGenerator(graticule());
        context.strokeStyle = "#2D2F31";
        context.stroke();
​
        // Countries
        context.beginPath();
        pathGenerator(data);
        context.fillStyle = "#46494C";
        context.fill();
        context.strokeStyle = "#EF8354";
        context.stroke();
      });
      
      svg
​
    });
  </script>
​
</body>
</html>
​
    