Google Maps + D3

forked from mbostock's block: Google Maps + D3

<!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: 2660px;
  height: 2660px;
  padding-right: 1px;
  font: 10px sans-serif;
}

.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>
  var layer;
var data2 = [
  [37.76487, -122.41948,4, 23450, 11975,  5871, 8916, 2868],
  [ 37.76487, -121.41948,3, 1951, 10048, 2060, 6171],
  [ 37.76487, -120.41948,1, 8010, 16145, 8090, 8045],
  [ 36.76487, -120.41948,2, 1013,   990,  940, 6907]
];
  var size=[80,20,10,70];
  var inp=0;
  
var data3 = {'pie':[
  [23450, 11975,  5871, 8916, 2868,40000],
  [1951, 10048, 2060, 6171],
  [8010, 16145, 8090, 8045],
  [1013,   990,  940, 6907]] ,
    'loc':[
      [37.76487, -122.41948,90],
      [ 37.76487, -121.41948,30],
      [ 37.76487, -120.41948,70],
      [ 36.76487, -120.41948,40]]
    }

var m = 10,
    r = 10,
    z = d3.scale.category10();
  var f=40.0, r=40;
  var loc =new google.maps.LatLng(37.76487, -122.41948);
  
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

// Load the station data. When the data comes back, create an overlay.
// d3.json("stations.json", function(error, data) {
//   if (error) throw error;

var overlay = new google.maps.OverlayView();
// google.maps.event.addListener(map, 'zoom_changed', function(event) {
// 					 console.log(overlay.getPanes().overlayLayer);
// 					 //overlay.setMap(null);
//   					//map.overlayMapTypes.setAt( 0, null);
//   					d3.select(overlay.getPanes().overlayLayer).remove("div");
//             overlay = new google.maps.OverlayView();
//   				 add(overlay);
//   				 overlay.setMap(map);
//             }); 
  add(overlay);
function add(overlay){
     
       // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
     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 = 0;

//       var marker = layer.selectAll("svg")
//           .data(d3.entries(data))
//           .each(transform) // update existing markers
//           .enter().append("svg")
//           .append("g")
//           .each(transform)
//           .attr("class", "marker");
			var marker = layer.selectAll("svg")
    								.data(data3.pie)
      							.each(transform)
  									.enter().append("svg")
    								.attr("width", (r + m) * 20)
    								.attr("height", (r + m) * 20)
  									.append("g")
      							.each(transform)
      							//.attr("class", "marker");
                   //.attr("transform", "translate(" + (r+m) + "," + (r+m) + ")");
      //console.log(marker);
    
//       // Add a circle.
      marker.append("circle")
          .attr("r", 3.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; });
      //console.log( marker.selectAll("path").data());

marker.selectAll("path")
         .data(d3.layout.pie())
         .enter().append("path")
         .attr("d", d3.svg.arc()
         .innerRadius(function (d,i,m) {
        		return data3.loc[m][2]-20;
         })
         .outerRadius( function (d,i,m) {
           // console.log(d);
          //console.log(data3.loc[m][2]);
          return data3.loc[m][2];
          }))         
         .style("fill", function(d, i) { 
        			//console.log(d); 
              return z(i); });

function transform(d,i) {
        //console.log("tt"+ d);
        d = new google.maps.LatLng(data3.loc[i][0], data3.loc[i][1]);
        //console.log(projection);
        d = projection.fromLatLngToDivPixel(d);
       // console.log(d3.select(this)["0"]["0"]);
        return d3.select(this)
        .attr("transform", "translate(" + (d.x ) + "," + (d.y) + ")");
           // .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