Melb

Built with blockbuilder.org

forked from qsorel's block: fresh block

forked from qsorel's block: fresh block 8

forked from anonymous's block: Melb

<!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;
}
  
  .bar {
  fill: #B3E9E2;
}

.bar:hover {
  fill: #32A192;
}

.axis--x path {
  display: none;
}

#markerLayer circle {
  animation: pulse .5s infinite alternate;
  -webkit-animation: pulse .5s infinite alternate;
  transform-origin: center;
  -webkit-transform-origin: center;
}  
  
#map {
  width: 960;
  height: 50;
  margin: 0;
  padding: 0;
}
 
#heure {
  width: 960;
  height: 75;
  margin-top: 0px;
  padding: 0;
}  
  #test{ width: 960; height: 200px; margin: 0; padding: 0;}
  
  #stat {
  width: 960;
  height: 500;
  margin-top: 0px;
  padding: 0;
}
  
    #stat {
  width: 960;
  height: 500;
  margin-top: 0px;
  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 {
   margin-right:1px;
	padding:6px 0 6px 0;
	font:Bold 13px Arial;
	background:#627B77;
	color:#fff;
	width:4.055%;
	border-radius:0px;
	border:none;
}
  .dataset-button:hover {
	padding:6px 0 6px 0;
	font:Bold 13px Arial;
	background:#689D96;
	color:#fff;
	width:4.055%;
	border-radius:0px;
	border:none;
}
  
  #entete_part {
      width: 100%;
      height: 75;
      margin: 0px;
      padding: 10px;
      text-align: center;
    color: white;
      background-color : #32A192;
    font-family: "Gill Sans", sans-serif;
    box-shadow: 1px 1px 12px #555;
    }
  
 div {
        position: center;
      }

</style>
<div id="robert">
       <div id="entete_part">
      <h1>Melbourne Pedestrian Activity</h1></div>
  <div id=renseignements>ggfhv</div>
</div>
<select id="map"></select>
<div id="test"></div>
<div id="heure"></div>
<div id="container"><div id="barchart30"></div><div id="barchart10"></div></div>

var bounceTimer;
var radius = d3.scaleSqrt()
    .domain([0, 2500])
    .range([2, 18]);
    
var colorScale = d3.scaleLinear()
    .domain([0, 2500])
    .range(["#B3E9E2", "#32A192"]);
 
var marker=[];
var map = new google.maps.Map(d3.select("#test").node(), {
          zoom: 14,
          center: {lat: -37.8090000, lng: 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}]}]
        });

/* 
        Because of the google maps bug of moving cursor several times over and out of marker
        causes bounce animation to break - we use small timer before triggering the bounce animation
        */

clearTimeout(bounceTimer);

var that = this;

bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        200);

}
      });
  
  marker[k].addListener('mouseout', function() {
        if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

// If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);
      });

bindEvent(sensor,data,marker[k],h,k,date2)

}
   
    afficherbarchart10(sensor,data,date)
    
  });});
      }
      
  function test2(h,date){
d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(data) {
         var date2=0;
    for (i=1;i<sensor.length;i++){
      if (sensor[i].Date==date){date2=i}
    }
for(k in data){
  marker[k].setMap(null)
  var latLng = new google.maps.LatLng(data[k].Latitude,data[k].Longitude)
  
  		      var whiteCircle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 0.5,
    fillColor: colorScale(sensor[h+date2][data[k]["Sensor Description"]]),
    strokeOpacity: 0.2,
    strokeColor: "white",
    strokeWeight: 1.0,
    scale: 1.5*radius(sensor[h+date2][data[k]["Sensor Description"]])
};
        marker[k] = new google.maps.Marker({
          map: map,
          icon: whiteCircle,
          //animation: google.maps.Animation.DROP,
          position: latLng
        });
        marker[k].addListener('mouseover', function() {
        if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

clearTimeout(bounceTimer);

var that = this;

bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        200);

}
      });
  
  marker[k].addListener('mouseout', function() {
        if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

// If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);
      });
  
  bindEvent(sensor,data,marker[k],h,k,date2)
  
      }
  });});
  }

curh=10
curd="03/11/2017"
affichage2(curh,curd)

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) {
          test2(d,curd);
        	curh=d;
        console.log(d)
        });

d3.csv("November_2017.csv", function(data) { 
  
  var menu = d3.select("#map")
    .on("change", function() {
          test2(curh,this.value);
        	curd=this.value;
      console.log(this.value)
        });

menu.selectAll("option")
    .data(d3.map(data, function(d){return d.Date;}).keys())
    .enter()
    .append("option")
    .text(function(d){return d;});
  
})

function bindEvent (sensor,data,marker,h,k,date2) {
    marker.addListener('click', function() {
      
      afficherbarchart30 (sensor,data,h,date2,marker["Sensor Description"])
  
    });
}
  
  
  function afficherbarchart10 (sensor,data,h,currentday){
  
  var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 960 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var svg = d3.select("#barchart10").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
		.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

donnees=[]
    for(i=0;i<sensor.length;i++){
      a=0
      for(j in data){
        if(Number.isInteger(+sensor[i][data[j]["Sensor Description"]])){
          f=+sensor[i][data[j]["Sensor Description"]];
          a=a+f
        }
      }
        donnees.push({key:sensor[i].Date,value:a})
    }

svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
  .selectAll("text")
  .attr("transform", function(d) {
                return "rotate(-65)" 
                })
  .attr("dx", "-.8em")
            .attr("dy", "4.em");

svg.selectAll(".bar")
    .data(averages)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value); });

}
  
  
  /*
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))

g.selectAll(".bar")
    .data(averages)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value); });
});}); 
  */
  
  function afficherbarchart30 (sensor,data,h,currentday,sensor_name){
    
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 960 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;
  
  
var svg2 = d3.select("#barchart30").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
		.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

donnees=[]
donnees1=[]
    for(i=0;i<sensor.length;i++){
      f=sensor[i][sensor_name]
      
      
      if(Number.isInteger(+f)){
        donnees.push({key:sensor[i].Hour,value:+f})
    }
    }
    
    i=0

while(sensor[i].Date!=currentday){
          console.log(sensor[i].Date)
      i++;
    }
    for(j=i;j<i+24;j++){
    donnees.push({x:j-i,y:sensor[i].sensor_name,type:"bar"})
    }
    
    
   var averages = d3.nest()
  .key(function(d) {
    return d.key; 
  })
  .rollup(function(d){
    return d3.mean(d, function(g) { 
      return g.value;
    });
   })
   .entries(donnees);
   
    console.log(averages)
  x.domain(averages.map(function(d) { return d.key; }));
  y.domain([0, d3.max(averages, function(d) { return d.value; })]);

svg2.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))

svg2.selectAll(".bar")
    .data(averages)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value); });
    
      svg2.selectAll(".bar")
    .data(donnees1)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("fill","red")
      .attr("x", function(d) { return x(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value); });
  }
  
  d3.select("#renseignements").append("text").attr("text",curd+", il est "+curh)
  
  var format = d3.timeParse("%d/%m/%Y");
console.log(format("17/01/1986").getDay())
  
</script>

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

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