D3 Examples - city of houston meetup venues with map

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

xxxxxxxxxx
 
<!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.jsdelivr.net/gh/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.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>
​
    