flight-paths-full-map

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame / Bl.ocks / D3</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.5/lodash.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js"></script>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js"></script>
    
    <script src="https://unpkg.com/aframe-map@2.0.2/dist/aframe-map.min.js"></script>
    <script>
      registerAframeMap(window.AFRAME);
    </script>

</head>
  <body>
    <a-scene>

    </a-scene>
    <script>
      // we need a scale to bring the latitudes into "world space"
      var xScale = d3.scaleLinear()
            				 .domain([-100, -95])
      							 .range([-10, 10]);
      // we need a scale to bring the longitudes into "world space"
      var zScale = d3.scaleLinear()
            				 .domain([25, 35])
      							 .range([-10, 10]);
      // we need a scale to bring the building heights into "world space"
      var yScale = d3.scaleLinear()
            				 .domain([0, 410])
      							 .range([0.5, 5]);
      function render () {
        d3.csv('https://raw.githubusercontent.com/houstondatavis/data-jam-february-2017/master/tracks.csv', function(blocks) {
          // we need to filter out the 0 values; because no houston meetups are happening at the equator (at least not as far as I know!)
          blocks = blocks.filter(function(row) {
        return row['latitude'] > 0 || row['longitude'] < 0;
    });
          d3.select('a-scene')
            .append('a-entity')
              .attr('id', 'blocks')
            .selectAll('.block')
              .data(blocks)
              .enter()
              .append('a-box')
                .attr('class', 'block')
                .attr('scale', (d, i) => {
                   return {x: 0.05, y: 0.05, z: 0.05}
          			})
                .attr('position', (d, i) => ({
                  x: xScale(d.longitude),
                  y: yScale(d.altitude),
                  z: zScale(d.latitude)
                }))
          	    .attr('material', {'transparent':true, 'opacity':0.5})	
                .attr('color', "black")
          			.append('a-mouseenter')
          				.attr('color','green')
          			.append('a-mouseleave')
          				.attr('color', 'black');
        });
      }

var sceneEl = document.querySelector('a-scene');
      if (sceneEl.hasLoaded) {
        render();
      } else {
        sceneEl.addEventListener('loaded', render);
      }
    </script>
  </body>
</html>

Updated missing url https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js to https://cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.5/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js

https://aframe.io/releases/0.3.2/aframe.min.js

https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js

https://unpkg.com/aframe-map@2.0.2/dist/aframe-map.min.js