testing circles in Leaflet.js (working)

<!DOCTYPE html>
<html>
<head>
	<title>Testing d3.js in Leaflet.js</title>

var map = new L.Map('map', {
		center: new L.LatLng( 47.0176,2.3427,6), 
		zoom: 5, 
		layers: [cloudmade]
	});
					
	/* Initialize the SVG layer */
	map._initPathRoot()

/* We simply pick up the SVG from the map object */
	var svg = d3.select("#map").select("svg"),
	g = svg.append("g");
	
	d3.json("taxa_json.json", function(collection) {
		/* Add a LatLng object to each item in the dataset */
		collection.features.forEach(function(d) {
			d.LatLng = new L.LatLng(d.geometry.coordinates[1],d.geometry.coordinates[0])
		})
  
		var feature = g.selectAll("circle")
		  .data(collection.features)
		  .enter().append("circle").attr("r", function (d) { return d.properties.count/20 });

function update() {
		  feature.attr("cx",function(d) { return map.latLngToLayerPoint(d.LatLng).x})
		  feature.attr("cy",function(d) { return map.latLngToLayerPoint(d.LatLng).y})
		  feature.attr("r",function(d) { return d.properties.count/1400*Math.pow(2,map.getZoom())})
		}
		map.on("viewreset", update);
		update();
	})			 
</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js?2.8.1 to a secure url

Modified http://code.leafletjs.com/leaflet-0.3.1/leaflet.js to a secure url

https://mbostock.github.com/d3/d3.v2.js?2.8.1

https://code.leafletjs.com/leaflet-0.3.1/leaflet.js