xxxxxxxxxx
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
margin-top:10px;
width: 90%;
height: 90%;
margin: 0;
padding: 0;
}
html, body, #histogramme {
margin-top:10px;
width: 90%;
height: 90%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
<div id="map"></div><br />
<div id="histogramme"></div>
<script src="//maps.google.com/maps/api/js?sensor=true"></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: 12,
center: new google.maps.LatLng(48.866667, 2.333333),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Load the station data. When the data comes back, create an overlay.
d3.json("tournagesdefilmsparis2011.json", function(error, data) {
if (error) throw error;
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 = 10;
var marker = layer.selectAll("svg")
.data(d3.entries(data))
.each(transform) // update existing markers
.enter().append("svg")
.each(transform)
.attr("class", "marker");
// Add a circle.
marker.append("circle")
.attr("r", 4.5)
.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; });
function transform(d) {
if(!(typeof d.value.fields.xy === "undefined")){
d = new google.maps.LatLng(d.value.fields.xy[0],d.value.fields.xy[1]);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", d.x - padding + "px")
.style("top", d.y - padding + "px");
}
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
});
</script>
https://maps.google.com/maps/api/js?sensor=true
https://d3js.org/d3.v3.min.js