D3 Examples - d3.js circles in leaflet.js

xxxxxxxxxx
 
<html>
<head>
    <title>Testing d3.js in Leaflet.js</title>
​
    <link rel="stylesheet" href="leaflet.css" />
​
​
        <script type="text/javascript" src="https://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="https://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
    <style type="text/css">
        path
        {
  fill: #E02A2A;
  stroke: #fff;
        }
​
    </style>
</head>
<body>
​
    <div id="map" style="width: 600px; height: 600px;position:relative"></div>
        
    
<script type="text/javascript">
​
        var cloudmadeUrl = 'https://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
                cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
                cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
        
            var map = new L.Map('map', {
                
                center: new L.LatLng( 47.0176,2.3427,6), 
                zoom: 5, 
                layers: [cloudmade]
            });
                    
            
    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g");
​
d3.json("testing.json", function(collection) {
  var bounds = d3.geo.bounds(collection),
      path = d3.geo.path().projection(project).pointRadius(function (d) {return d.properties.count/50});
console.warn(path)
​
  var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path");
​
  map.on("viewreset", reset);
  reset();
​
  // Reposition the SVG to cover the features.
  function reset() {
    console.warn(bounds)
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);
​
    svg .attr("width", topRight[0] - bottomLeft[0])
        .attr("height", bottomLeft[1] - topRight[1])
        .style("margin-left", bottomLeft[0] + "px")
        .style("margin-top", topRight[1] + "px").attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
​
     g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
​
    feature.attr("d", path)
  }
​
  // Use Leaflet to implement a D3 geographic projection.
  function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
  }
​
  
    })       
                
            
​
     </script>
</body>
</html>
    