D3 Examples - Starbucks in Norfolk (mousehover)

Starbucks in Norfolk (mousehover)

##Rule of thumb ###Overview first, zoom and filter, details on demand

####Problem:

It is hard to display all details at the same time.

Problem: /hungvietdo/64b015914153b85419ce

####Solution:

Just give an overview of information (positions of Starbucks).

Users can get detail information by hovering mouse to the point of data.

Solution: /hungvietdo/ed790586548e472f1f57/example/

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
​
html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
​
.stations, .stations svg {
  position: absolute;
}
​
.stations svg {
  width: 400px;
  height: 50px;
  padding: 10px 5px 5px 5px;
  font: 12px sans-serif;
}
​
.textbox {
    padding: 10px 5px 5px 5px;
    font: 12px sans-serif;
    background-color:lightblue;
    top:true;
}
​
​
.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}
​
</style>
<div id="map"></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: 13,
  center: new google.maps.LatLng(36.876354, -76.251697),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
​
d3.json("stations.json", function(error, data) {
  if (error) throw error;
​
  var overlay = new google.maps.OverlayView();
​
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")
        .attr("class", "stations");
​
        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");
​
      marker.append("foreignObject")
          .attr("width", 600)
          .attr("height", 60)
          .attr("x", 20)
          .attr("id",function(d, i){return "t" + i;})
          .attr("visibility","hidden")
          .attr("class","textbox")
         
        .append("xhtml:body")
          .html(function(d){ return "<b>Starbucks:</b> <br>"+d.value.properties.Description; });
​
      // Add a circle.
      marker.append("circle")
          .attr("r", 10)
          .attr("cx", padding)
          .attr("cy", padding)
          .on("mouseover",function(d,i){
            d3.select("#t"+i).transition()
            .duration(100)
            .attr("visibility","visible")
       })
       .on("mouseout",function(d,i){
           d3.select("#t"+i).transition()
           .duration(100)
           .attr("visibility","hidden")
           ;
       });
    
      function transform(d, i) {
        d = new google.maps.LatLng(d.value.geometry.coordinates[1], d.value.geometry.coordinates[0]);
        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>
    