koaning/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>d3.js with leaflet.js</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <style>
	    html, body, #map{
	    	min-width: 500px;
	    	min-height: 500px;
	    	width: 100%;
	    	height: 100%;
	    	margin: 0px;
	    }
	</style>
</head>
<body>

	<div id="map"></div>

	<script type="text/javascript">

	var circles = [[52.3667,4.90000],[52.6667,5.10000],[52.1, 4.8],[52.08,5.11],[51.9167, 4.5000]];

    var map = L.map('map').setView([52.3667,4.90000], 8);

    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy + Openstreetmap Contributors',
        maxZoom: 18,
        }).addTo(map);

	map._initPathRoot();

	var svg = d3.select("#map").select("svg"),
		g = svg.append("g");

	circles.forEach(function(d) {
		d.LatLng = new L.LatLng(d[0],d[1])
	});

	var links = _.rest(circles).map( function(d){
		return [_.first(circles), d ]
	})

	var feature = g.selectAll("circle")
		.data(circles)
		.enter().append("circle")
		.style("fill", "orange")
		.style("fill-opacity",0.7)
		.attr("r", 10)
		.on("click", function(d){
			alert(d)
		});

	map.on("viewreset", update);

	update();

	function update(){
		feature.attr("transform",
		function(d) {
			return "translate("+
				map.latLngToLayerPoint(d.LatLng).x +","+
				map.latLngToLayerPoint(d.LatLng).y +")";
			}
		)
	}

	function move(duration){
		feature.transition().attr("transform",
		function(d) {
			return "translate("+
				(map.latLngToLayerPoint(d.LatLng).x + Math.random() * 300 ) +","+
				(map.latLngToLayerPoint(d.LatLng).y ) +")";
			}
		).duration(duration).ease("linear")
	}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>d3.js with leaflet.js</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
	<style>
	html, body, #map{
	min-width: 500px;
	min-height: 500px;
	width: 100%;
	height: 100%;
	margin: 0px;
	}
	</style>
	</head>
	<body>

	<div id="map"></div>

	<script type="text/javascript">

	var circles = [[52.3667,4.90000],[52.6667,5.10000],[52.1, 4.8],[52.08,5.11],[51.9167, 4.5000]];

	var map = L.map('map').setView([52.3667,4.90000], 8);

	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy + Openstreetmap Contributors',
	maxZoom: 18,
	}).addTo(map);

	map._initPathRoot();

	var svg = d3.select("#map").select("svg"),
	g = svg.append("g");

	circles.forEach(function(d) {
	d.LatLng = new L.LatLng(d[0],d[1])
	});

	var links = _.rest(circles).map( function(d){
	return [_.first(circles), d ]
	})

	var feature = g.selectAll("circle")
	.data(circles)
	.enter().append("circle")
	.style("fill", "orange")
	.style("fill-opacity",0.7)
	.attr("r", 10)
	.on("click", function(d){
	alert(d)
	});

	map.on("viewreset", update);

	update();

	function update(){
	feature.attr("transform",
	function(d) {
	return "translate("+
	map.latLngToLayerPoint(d.LatLng).x +","+
	map.latLngToLayerPoint(d.LatLng).y +")";
	}
	)
	}

	function move(duration){
	feature.transition().attr("transform",
	function(d) {
	return "translate("+
	(map.latLngToLayerPoint(d.LatLng).x + Math.random() * 300 ) +","+
	(map.latLngToLayerPoint(d.LatLng).y ) +")";
	}
	).duration(duration).ease("linear")
	}

	</script>
	</body>
	</html>