D3 Examples - Mega2

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
​
html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
​
​
    
​
</style>
<div id="map"></div>
<script>
  
​
​
​
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(19.1256,-155.61119),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
  
          var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
            'sandstone rock formation in the southern part of the '+
            'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
            'south west of the nearest large town, Alice Springs; 450&#160;km '+
            '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
            'Aboriginal people of the area. It has many springs, waterholes, '+
            'rock caves and ancient paintings. Uluru is listed as a World '+
            'Heritage Site.</p>'+
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
            'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
            '(last visited June 22, 2009).</p>'+
            '</div>'+
            '</div>';
​
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
​
function addMarker(d) {
  console.log("d:", d)
        
        latlng = d.location;
        latlng = latlng.split(",")
        lat = +latlng[0]
        lng = +latlng[1]
       
        latlng = new google.maps.LatLng(lat,lng);
        
​
  var markerTwo = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: {
      path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
      fillColor: '#FF0000',
      fillOpacity: .6,
      strokeWeight: 1,
      scale: .5,
      text: "57"
    },
    label: d.population
  })
          markerTwo.addListener('click', function() {
          infowindow.open(map, markerTwo);
        });
  }
  
d3.csv("echteMega.csv", function(error, data) {
  if (error) throw error;
    
  
console.log(data)
      
data.forEach(function (d) { addMarker(d)})
  
        
     
  
 
 
     
​
​
​
       
     
  
​
​
});
​
</script>
​
    