D3 Examples - fresh block 8

xxxxxxxxxx
 
<!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: steelblue;
}
​
.bar:hover {
  fill: brown;
}
​
.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: 10%;
  height: 5%;
  margin: 0;
  padding: 0;
}
 
#heure {
  width: 100%;
  height: 10%;
  margin-top: 0px;
  padding: 0;
}  
  #test{ width: 100%; height: 50%; margin: 0; padding: 0;} 
  #stat {
  width: 100%;
  height: 35%;
  margin-top: 0px;
  padding: 0;
}
  
  #maurice {
  width: 100%;
  height: 100%;
  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 {
    padding: 6px 0 6px 0;
    font:Bold 13px Arial;
    background:#fafafa;
    color:#555;
  border-right: 1px solid fafafa;
  border-radius: 50%;
    width:40px;
  height:40px;
}
​
</style>
<svg width="960" height="200"></svg>
​
<select id="map"></select>
​
<div id="test"></div>
<div id="heure"></div>
<div id="stat"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
 
  var bounceTimer;
var radius = d3.scaleSqrt()
    .domain([0, 2500])
    .range([2, 18]);
    
var colorScale = d3.scaleLinear()
    .domain([0, 2500])
    .range(["#c8e1ee", "#317ca4"]);
 
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}]}]
        });
​
      function affichage2(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){
  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') {
​
        /* 
        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)
​
      }
  });});
      }
      
  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') {
​
        /* 
        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);
      });
  
      }
  });});
  }
​
​
​
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() {
      
      var svgContainer = d3.select("#stat").append("svg")
                                     .attr("width", 200)
                                     .attr("height", 200);
 
var circles = svgContainer.selectAll("circle")
                                                    .data(sensor)
                          .enter()
                          .append("circle");
​
var circleAttributes = circles
                       .attr("cx", function (d) { return 10; })
                       .attr("cy", function (d) { return 10; })
                       .attr("r", 10)
                       .style("fill", "blue");
      
      
        console.log(k)
    });
}
  
  
  
  
  /*
  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 + ")");
​
d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(error, data) {
  if (error) throw error;
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})
    }
​
    
    var averages = d3.nest()
  .key(function(d) {
    return d.key; 
  })
  .rollup(function(d){
    return d3.mean(d, function(g) { 
      return g.value;
    });
   })
   .entries(donnees);
    
    
  x.domain(averages.map(function(d) { return d.key; }));
  y.domain([0, d3.max(averages, function(d) { return d.value; })]);
​
  g.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");
​
​
​
  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); });
});});
  
  
  
  
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 + ")");
​
var format = d3.timeParse("%d/%m/%Y");
 var jours=["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"]
d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(error, data) {
  if (error) throw error;
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:jours[format(sensor[i].Date).getDay()],value:a})
    }
​
    
    var averages = d3.nest()
  .key(function(d) {
    return d.key; 
  })
  .rollup(function(d){
    return d3.mean(d, function(g) { 
      return g.value;
    });
   })
   .entries(donnees);
    
    
  x.domain(averages.map(function(d) { return d.key; }));
  y.domain([0, d3.max(averages, function(d) { return d.value; })]);
​
  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); });
});}); 
  */
  h=7;
  currentday=curd
  sensor_name="State Library"
  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 + ")");
​
d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(error, data) {
  if (error) throw error;
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){
      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);
    
    
  x.domain(averages.map(function(d) { return d.key; }));
  y.domain([0, d3.max(averages, function(d) { return d.value; })]);
​
  g.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");
​
​
​
  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); });
    
      g.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); });
    
});});
  
  
  var format = d3.timeParse("%d/%m/%Y");
console.log(format("17/01/1986").getDay())
  
</script>
​
    