D3 Examples - BDI : Assignment 1

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map{
      position:absolute;
      width:100%;
      height:100%;
    }
  </style>
</head>
​
<body>
  <div id="map"></div>
  <script>
    //Setup our Leaflet map using Mapbox.js
    L.mapbox.accessToken = 'pk.eyJ1IjoicHJhc2FkY2hpa2FuZSIsImEiOiJjaXp5cXkyMGUwMzRrMnZxcXZtd25xb2R6In0.MTMwiLDxrOUwNDchAezUtw'
    //Setup our Leaflet map using Mapbox.js
    var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([34.0522,-118.2437], 15);
        
    function project(latlng){
      var array = [+latlng.lat, +latlng.lon]
      var point = map.latLngToLayerPoint(L.latLng(latlng));
​
      return point;
    }
    
    
    // Setup our svg layer that we can manipulate with d3
    var svg = d3.select(map.getPanes().overlayPane)
      .append("svg");
    var g = svg.append("g").attr("class", "leaflet-zoom-hide");
    
    d3.csv("la_dataset.csv",function(err,data){
      console.log(project(data[0])) 
      //   console.log("data:",data)
    var dots =  g.selectAll("circle").data(data)
    
    dots.enter().append("circle")
​
    dots.attr({
      cx: function(d) { return 100},
      cy: function(d) { return 100},
      r: 5
    })
    
    
    })
          
    
    
   
  </script>
</body>
​
    