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.95],[52.3667,4.9],[52.3667,4.85],[52.3667,4.8],
		[52.3867,4.95],[52.3867,4.9],[52.3867,4.85],[52.3867,4.8]
	];

	var circle_data = [
	  [10,70,40],
	  [40,80,30],
	  [65,90,20],
	  [-20,85,20]
	];

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

    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");

    var cloudDef = svg.append('defs').append("g").attr("id","cloud").style("opacity", 0.5);

	cloudDef.selectAll("circle").data(circle_data).enter()
		.append("circle")
		.attr("cx", function(d){return d[0]})
	  	.attr("cy", function(d){return d[1]})
	  	.attr("r", function(d){return d[2]})
	  	.style("fill", "white");

	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("g")
		.attr("class","cloud")
		.attr("transform", function(d){
			return "translate(" +  d +")"
		})
		.attr("class","cloud")
		.append("use").attr("xlink:href","#cloud")

	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){
		d3.selectAll("g.cloud").transition().attr("transform", function(d){
			return "translate(" +100*Math.random() + "," + 100*Math.random() +")"
		}).duration(duration).ease("sin")
	}

	setInterval( function(){ move(1000) }, 1000 )

</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.95],[52.3667,4.9],[52.3667,4.85],[52.3667,4.8],
	[52.3867,4.95],[52.3867,4.9],[52.3867,4.85],[52.3867,4.8]
	];

	var circle_data = [
	[10,70,40],
	[40,80,30],
	[65,90,20],
	[-20,85,20]
	];

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

	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");

	var cloudDef = svg.append('defs').append("g").attr("id","cloud").style("opacity", 0.5);

	cloudDef.selectAll("circle").data(circle_data).enter()
	.append("circle")
	.attr("cx", function(d){return d[0]})
	.attr("cy", function(d){return d[1]})
	.attr("r", function(d){return d[2]})
	.style("fill", "white");

	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("g")
	.attr("class","cloud")
	.attr("transform", function(d){
	return "translate(" + d +")"
	})
	.attr("class","cloud")
	.append("use").attr("xlink:href","#cloud")

	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){
	d3.selectAll("g.cloud").transition().attr("transform", function(d){
	return "translate(" +100Math.random() + "," + 100Math.random() +")"
	}).duration(duration).ease("sin")
	}

	setInterval( function(){ move(1000) }, 1000 )

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