city of houston meetup venues with map - d3 boxes

Description

Here we use aframe's a-boxes, which are kind of like SVG rects, to map Meetup venues in Houston by latitude and longitude. The heights of the buildings are mapped to the frequency of events at that particular venue. The result is a city skyline for Houston's meetup scene.

Data were provided as part of the Houston Data Visualization Meetup's data jam October 2016. More details on the data here.

History

forked from micahstubbs's block: d3 blocks on a-boxes

forked from neerajt's block: d3 blocks on a-boxes

forked from neerajt's block: d3 blocks on a-boxes - 2

forked from neerajt's block: city of houston meetup venues - d3 boxes

<!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-map
        map="center: -95.3698 29.7604; 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([-125, 0])
      							 .range([-10, 10]);
      // we need a scale to bring the longitudes into "world space"
      var zScale = d3.scaleLinear()
            				 .domain([0, 43])
      							 .range([-10, 10]);
      // we need a scale to bring the building heights into "world space"
      var yScale = d3.scaleLinear()
            				 .domain([0, 303])
      							 .range([0.5, 15]);
      function render () {
        d3.csv('meetup_venue_events.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['lat'] > 0 || row['lon'] < 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.25, y: yScale(d.Freq), z: 0.25}
          			})
                .attr('position', (d, i) => ({
                  x: xScale(d.lon),
                  y: 0.5 * yScale(d.Freq),
                  z: zScale(d.lat)
                }))
          	    .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