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>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: (parseInt(d3.select('body').style('width'), 10)/10), right: (parseInt(d3.select('body').style('width'), 10)/20), bottom: (parseInt(d3.select('body').style('width'), 10)/5), left: (parseInt(d3.select('body').style('width'), 10)/20)},
    width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right,
    height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom;
  h=7;
  currentday="01/11/2017"
  sensor_name="State Library"
var x0 = d3.scaleBand()
    .rangeRound([0, width])
.padding(0.1);
​
var x1 = d3.scaleBand();
​
var y = d3.scaleLinear()
    .rangeRound([height, 0]);
​
var colorRange = d3.scaleOrdinal(d3.schemeCategory10);
var color = d3.scaleOrdinal()
    .range(colorRange.range());
​
var xAxis = d3.axisBottom(x0);
​
var yAxis = d3.axisLeft(y)
​
var divTooltip = d3.select("h").append("div").attr("class", "toolTip");
​
var svg = d3.select("body").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 + ")");
​
d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(error, data) {
  if (error) throw error;
donnees=[]
donnees1=[]
​
i=0
        while(sensor[i].Date!=currentday){
      i++;
    }
    for(j=i;j<i+24;j++){
      if(Number.isInteger(+sensor[j][sensor_name])){
    donnees1.push(+sensor[j][sensor_name])}
    }
​
console.log(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})
    }
    
    }
​
    console.log(donnees)
    
    var averages = d3.nest()
  .key(function(d) {
    return d.key; 
  })
  .rollup(function(d){
    return d3.mean(d, function(g) { 
      return g.value;
    });
   })
   .entries(donnees);
    
   for(i=0;i<averages.length;i++){
    averages[i].value2=donnees1[i]
   }
     
    console.log(averages)
    
    var options = d3.keys(averages[0]).filter(function(key) { return key !== "key"; });
​
averages.forEach(function(d) {
    d.valores = options.map(function(name) { return {name: name, value: +d[name]}; });
});
​
   
x0.domain(averages.map(function(d) { return d.key; }));
x1.domain(options).rangeRound([0, x0.bandwidth()]).padding(0);
y.domain([0, d3.max(averages, function(d) { return d3.max(d.valores, function(d) { return d.value; }); })]);
      
      svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
​
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Satisfaction %");
​
var bar = svg.selectAll(".bar")
    .data(averages)
    .enter().append("g")
    .attr("class", "rect")
    .attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; });
​
bar.selectAll("rect")
    .data(function(d) { return d.valores; })
    .enter().append("rect")
    .attr("width", x1.bandwidth())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("value", function(d){return d.name;})
    .attr("height", function(d) { return + height - y(d.value); })
    .style("fill", function(d) { return color(d.name); });
​
​
    
});});
  
  
  var format = d3.timeParse("%d/%m/%Y");
console.log(format("17/01/1986").getDay())
  
</script>
​
    