Skip to content

Instantly share code, notes, and snippets.

@neerajt
Created Feb 25, 2017
Embed
What would you like to do?
flight-paths-full-map
license: mit
<!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