xxxxxxxxxx
<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;
}
#markerLayer circle {
animation: pulse .5s infinite alternate;
-webkit-animation: pulse .5s infinite alternate;
transform-origin: center;
-webkit-transform-origin: center;
}
#map {
width: 100%;
height: 10%;
margin: 0;
padding: 0;
}
#heure {
width: 100%;
height: 10%;
margin-top: 0px;
padding: 0;
}
#test{ width: 100%; height: 80%; margin: 0; 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>
<select id="map"></select>
<div id="test"></div>
<div id="heure"></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);
});
}
});});
}
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;});
})
</script>
https://maps.googleapis.com/maps/api/js?v=3.exp
https://d3js.org/d3.v4.min.js