D3 Examples - the-counted-demo

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {margin:0;position:fixed;top:0;right:0;bottom:0;left:0;} 
    #output { width: 100%; height: 100%; overflow-y: scroll; }
    
    .row {
      font-family: Courier;
      font-size: 12px;
      float: left;
      clear: left;
      margin: 5px;
    }
  </style>
</head>
​
<body>
  <div id="output"></div>
  <script>
    d3.csv("the-counted-2015.csv", function(err, data) {
      
      var test = data.slice(0, 10);
      
      test.forEach(function(d, i) {
        var search = d.streetaddress + "" + d.city + "," + d.state; d.search = search;      
        
        setTimeout(function() {
        var url = "https://search.mapzen.com/v1/search?text=" + search + "&api_key=mapzen-RK7oUC1";
        d3.json(url, function(err, geo) {
          console.log("GEO", d, geo)
            d.geo = geo;
          
        render(test);
      })
    }, 1000 + i * 200)  
    })
    render(test);
    
    })
 
    function render(data) {
      var rows = d3.select("#output").select("div.row")
      .data(data)
      rows.enter().append("div").classed("row", true)
      .on("click", function(d) {
        console.log(d);
      })  
      rows.text(function(d) { return d.search })
    
      var geos = rows
      .filter(function(d) { return !!d.geo })
      .select("div.geo")
      .data(function(d) {
        return d.geo.features;
      })
    
      geos.enter().append("div").classed("geo", true)
      
      geos.text(function(g) {
       return g.properties.label  
      })
    }
  </script>
</body>
​
    