Built with blockbuilder.org
Created
February 25, 2017 17:24
-
-
Save neerajt/2795be21fe28e7bd25865f6e99034e5e to your computer and use it in GitHub Desktop.
flight-paths-full-map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>A-Frame / Bl.ocks / D3</title> | |
| <!-- load lodash.js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.5/lodash.min.js"></script> | |
| <!-- load d3.js --> | |
| <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.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js"></script> | |
| <!-- load aframe-map --> | |
| <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-map | |
| map="center: -95.278660 29.645207; zoom: 13" | |
| height="20" | |
| width="20" | |
| rotation="-90 0 0" | |
| ></a-map> --> | |
| </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment