Map Quentin

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 90%;
  margin: 0;
  padding: 0;
}
 
#heure {
  width: 100%;
  height: 10%;
  margin-top: 10px;
  padding: 0;
}  
  
.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width: 600px;
  height: 200px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  //fill: brown;
  //stroke: black;
  //stroke-width: 1.5px;
}
.dataset-button {
	padding: 6px 0 6px 0;
	font:Bold 13px Arial;
	background:#333333;
	color:#fff;
  border-right: 1px solid white;
	width:40px;
}

</style>
<div id="map"><canvas>
			<div id="points"></div>
		</canvas></div>
<div id="heure"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

// Create the Google Map…
/*var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 14,
  center: new google.maps.LatLng(-37.8090000, 144.9633200),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});*/
width = Math.max(960, window.innerWidth)
height = Math.max(500, window.innerHeight)

d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(data) {

var  map = new google.maps.Map(d3.select("#map").node(), {
    zoom: 14,
    center: new google.maps.LatLng(-37.8090000, 144.9633200),
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
  })
  
   function affichage(h){
  
var projection = d3.geo.mercator()
.scale((1 << 24) / 2 / Math.PI)
.translate([-width / 2, -height / 2]);
  
var locations = d3.select('#points');

var radius = d3.scale.sqrt()
    .domain([0, 2000])
    .range([0, 15]);

var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

// Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 100;

function transform(donnee) {
        d = new google.maps.LatLng(donnee.value.Latitude,donnee.value.Longitude);
				dBis = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (dBis.x - padding) + "px")
            .style("top", (dBis.y - padding) + "px");
      }

var marker = layer.selectAll("svg")
          										.data(d3.entries(data));
            	
      
      
      marker.enter()
          		.append("svg")
        			     							
             .append("circle")
        .attr("class", "circle enter")
      .each(transform) 
          .attr("r", function(d){ console.log(sensor[h][d.value["Sensor Description"]]);
                                 return radius(sensor[h][d.value["Sensor Description"]]) })
      		.attr("fill","brown")
          .attr("cx", padding)
          .attr("cy", padding);

// Add a label.
      marker.append("text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.key; });

marker.attr("class", "update")
          .each(transform)
       	.transition()
       .duration(500)
          .attr("r", function(d){ 
         console.log("sensor update");
         console.log(sensor[h][d.value["Sensor Description"]]);
     return radius(sensor[h][d.value["Sensor Description"]]); })
      		.attr("fill","brown")
          .attr("cx", padding)
          .attr("cy", padding);

};
  };
    
    
  // Bind our overlay to the map…
  overlay.setMap(map);
		}
    
datasets = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
  var datasetpicker = d3.select("#heure").selectAll(".dataset-button")
        .data(datasets);

datasetpicker.enter()
        .append("input")
        .attr("value", function(d){ return d+"h" })
        .attr("type", "button")
        .attr("class", "dataset-button")
        .on("click", function(d) {
          affichage(d);
        });
//console.log(sensor[1]["Alfred Place"])

});
  });

</script>

https://maps.googleapis.com/maps/api/js?v=3.exp

https://d3js.org/d3.v3.min.js