#PragmaConf 2015 Participants

circles.json

{"objects":[ 
{"circle":{"coordinates":[47.4156189,8.5889722]}},
{"circle":{"coordinates":[45.6982642,9.6772698]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[37.5078772,15.0830304]}},
{"circle":{"coordinates":[45.5454787,11.5354214]}},
{"circle":{"coordinates":[46.151241,14.995463]}},
{"circle":{"coordinates":[45.9549755,13.6493044]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[45.4732537,10.8507277]}},
{"circle":{"coordinates":[45.4383842,10.9916215]}},
{"circle":{"coordinates":[42.404509,12.8567281]}},
{"circle":{"coordinates":[48.856614,2.3522219]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[45.6982642,9.6772698]}},
{"circle":{"coordinates":[44.647128,10.9252269]}},
{"circle":{"coordinates":[40.8517746,14.2681244]}},
{"circle":{"coordinates":[43.530781,11.5639528]}},
{"circle":{"coordinates":[43.8376211,10.4950609]}},
{"circle":{"coordinates":[62.6010899,29.7635297]}},
{"circle":{"coordinates":[45.5814501,9.6679688]}},
{"circle":{"coordinates":[45.6982642,9.6772698]}},
{"circle":{"coordinates":[44.6989932,10.6296859]}},
{"circle":{"coordinates":[51.3657357,-0.411996]}},
{"circle":{"coordinates":[43.64152,7.009186]}},
{"circle":{"coordinates":[45.070312,7.6868565]}},
{"circle":{"coordinates":[44.4058612,8.6860167]}},
{"circle":{"coordinates":[45.4148389,10.3928713]}},
{"circle":{"coordinates":[45.4383842,10.9916215]}},
{"circle":{"coordinates":[45.4383842,10.9916215]}},
{"circle":{"coordinates":[41.9027835,12.4963655]}},
{"circle":{"coordinates":[44.8381237,11.619787]}},
{"circle":{"coordinates":[48.856614,2.3522219]}},
{"circle":{"coordinates":[48.856614,2.3522219]}},
{"circle":{"coordinates":[44.0678288,12.5695158]}},
{"circle":{"coordinates":[44.4183598,12.2035294]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[41.1171432,16.8718715]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[45.7410006,9.5807014]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[51.5135872,7.4652981]}},
{"circle":{"coordinates":[42.1322895,21.7256936]}},
{"circle":{"coordinates":[44.5050832,26.1555435]}},
{"circle":{"coordinates":[48.856614,2.3522219]}},
{"circle":{"coordinates":[49.8728253,8.6511929]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[46.2343502,9.1288093]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[46.54219,9.1859243]}},
{"circle":{"coordinates":[40.2960328,14.9520274]}},
{"circle":{"coordinates":[46.818188,8.227512]}},
{"circle":{"coordinates":[43.6182636,11.4718445]}},
{"circle":{"coordinates":[50.0646501,19.9449799]}},
{"circle":{"coordinates":[48.1351253,11.5819806]}},
{"circle":{"coordinates":[39.1788863,8.9709827]}},
{"circle":{"coordinates":[53.3498053,-6.2603097]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[48.7758459,9.1829321]}},
{"circle":{"coordinates":[43.4129238,-80.4771472]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[52.406374,16.9251681]}},
{"circle":{"coordinates":[52.406374,16.9251681]}},
{"circle":{"coordinates":[52.406374,16.9251681]}},
{"circle":{"coordinates":[52.406374,16.9251681]}},
{"circle":{"coordinates":[48.1351253,11.5819806]}},
{"circle":{"coordinates":[52.0907374,5.1214201]}},
{"circle":{"coordinates":[47.3881047,8.7517889]}},
{"circle":{"coordinates":[42.6977082,23.3218675]}},
{"circle":{"coordinates":[42.6977082,23.3218675]}},
{"circle":{"coordinates":[53.3498053,-6.2603097]}},
{"circle":{"coordinates":[53.3498053,-6.2603097]}},
{"circle":{"coordinates":[29.4241219,-98.4936282]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[43.548473,10.3105674]}},
{"circle":{"coordinates":[52.2296756,21.0122287]}},
{"circle":{"coordinates":[33.5626094,35.3687268]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[45.070312,7.6868565]}},
{"circle":{"coordinates":[45.070312,7.6868565]}},
{"circle":{"coordinates":[45.070312,7.6868565]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[46.0569465,14.5057515]}},
{"circle":{"coordinates":[46.0569465,14.5057515]}},
{"circle":{"coordinates":[40.8517746,14.2681244]}},
{"circle":{"coordinates":[40.8517746,14.2681244]}},
{"circle":{"coordinates":[52.406374,16.9251681]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[39.0699215,-3.6141819]}},
{"circle":{"coordinates":[44.647128,10.9252269]}},
{"circle":{"coordinates":[47.497912,19.040235]}},
{"circle":{"coordinates":[47.497912,19.040235]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[50.794995,-1.117547]}},
{"circle":{"coordinates":[45.5415526,10.2118019]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[45.8150108,15.981919]}},
{"circle":{"coordinates":[45.8150108,15.981919]}},
{"circle":{"coordinates":[45.8150108,15.981919]}},
{"circle":{"coordinates":[45.8150108,15.981919]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[50.937531,6.9602786]}},
{"circle":{"coordinates":[48.1351253,11.5819806]}},
{"circle":{"coordinates":[51.0504088,13.7372621]}},
{"circle":{"coordinates":[51.0504088,13.7372621]}},
{"circle":{"coordinates":[46.818188,8.227512]}},
{"circle":{"coordinates":[46.818188,8.227512]}},
{"circle":{"coordinates":[52.5200066,13.404954]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[50.4501,30.5234]}},
{"circle":{"coordinates":[50.4501,30.5234]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[51.165691,10.451526]}},
{"circle":{"coordinates":[51.165691,10.451526]}},
{"circle":{"coordinates":[42.6977082,23.3218675]}},
{"circle":{"coordinates":[43.7695604,11.2558136]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[43.3513193,12.5753166]}},
{"circle":{"coordinates":[43.3513193,12.5753166]}},
{"circle":{"coordinates":[43.3513193,12.5753166]}},
{"circle":{"coordinates":[43.3513193,12.5753166]}},
{"circle":{"coordinates":[53.9045398,27.5615244]}},
{"circle":{"coordinates":[52.5200066,13.404954]}},
{"circle":{"coordinates":[52.5200066,13.404954]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[45.1,15.2]}},
{"circle":{"coordinates":[45.1,15.2]}},
{"circle":{"coordinates":[42.6977082,23.3218675]}},
{"circle":{"coordinates":[42.6977082,23.3218675]}},
{"circle":{"coordinates":[52.2296756,21.0122287]}},
{"circle":{"coordinates":[45.889197,12.3006368]}},
{"circle":{"coordinates":[45.889197,12.3006368]}},
{"circle":{"coordinates":[45.889197,12.3006368]}},
{"circle":{"coordinates":[43.580418,7.125102]}},
{"circle":{"coordinates":[60.1733244,24.9410248]}},
{"circle":{"coordinates":[44.6989932,10.6296859]}},
{"circle":{"coordinates":[51.3396955,12.3730747]}},
{"circle":{"coordinates":[50.4501,30.5234]}},
{"circle":{"coordinates":[48.379433,31.16558]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[44.786568,20.4489216]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.5415526,10.2118019]}},
{"circle":{"coordinates":[45.5415526,10.2118019]}},
{"circle":{"coordinates":[55.953252,-3.188267]}},
{"circle":{"coordinates":[55.953252,-3.188267]}},
{"circle":{"coordinates":[55.953252,-3.188267]}},
{"circle":{"coordinates":[41.3850639,2.1734035]}},
{"circle":{"coordinates":[41.3850639,2.1734035]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[51.5073509,-0.1277583]}},
{"circle":{"coordinates":[52.5200066,13.404954]}},
{"circle":{"coordinates":[45.6289905,12.3745787]}},
{"circle":{"coordinates":[61.92411,25.748151]}},
{"circle":{"coordinates":[45.133249,10.0226511]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.133249,10.0226511]}},
{"circle":{"coordinates":[55.6760968,12.5683371]}},
{"circle":{"coordinates":[45.4064349,11.8767611]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[46.7712101,23.6236353]}},
{"circle":{"coordinates":[37.7749295,-122.4194155]}},
{"circle":{"coordinates":[37.7749295,-122.4194155]}},
{"circle":{"coordinates":[53.5316484,9.9852574]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[40.4167754,-3.7037902]}},
{"circle":{"coordinates":[45.4654219,9.1859243]}},
{"circle":{"coordinates":[41.87194,12.56738]}},
{"circle":{"coordinates":[41.87194,12.56738]}},
{"circle":{"coordinates":[41.87194,12.56738]}},
{"circle":{"coordinates":[41.87194,12.56738]}},
{"circle":{"coordinates":[47.3768866,8.541694]}},
{"circle":{"coordinates":[47.3768866,8.541694]}}
]}

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>PragmaConf 2015 Participants</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
  <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
  <style type="text/css">
	html,
    body {
        height: 100%;
        width: 100%;
    }
    body {
        margin: 0;
    }
    #map {
        width: 100%;
        height: 100%;
    }
    #header{
		position: absolute;
		top: 10px;
		left: 50px;
		font-family: sans-serif;
		font-size: 30px;
		padding: 10px;
		background: #444;
		width: 232px;
		color: #ffffff;
		text-align: left;
		border: 2px solid #ddd;
		cursor: pointer;
	}
    </style>
    
</head>
<body>

	<div id="map"></div>
	<div id = "header">Participants 2015</div>

	<script type="text/javascript">
	
        var map = L.map('map').setView([48.848632, 6.860720], 5);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors'
            }).addTo(map);
				
	/* 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("circles.json", function(collection) {
		/* Add a LatLng object to each item in the dataset */
		collection.objects.forEach(function(d) {
			d.LatLng = new L.LatLng(d.circle.coordinates[0],
									d.circle.coordinates[1])
		})
		
		var feature = g.selectAll("circle")
			.data(collection.objects)
			.enter().append("circle") 
			.style("opacity", .2) 
			.style("stroke", "black") 
			.style("stroke-width", "3px") 
			.style("fill", "red")
			.attr("r",0);
		
		map.on("viewreset", update);
		


    	d3.select("#header").on("click", update);
	

		

		function update() {
			feature.attr("transform", 
			function(d) { 
				return "translate("+ 
					map.latLngToLayerPoint(d.LatLng).x +","+ 
					map.latLngToLayerPoint(d.LatLng).y +")";
				}
			)
			feature.transition().delay(function(d, i) { return i/220 * 7000; }).attr("r", 10);
		}

	})	
 
</script>
</body>
</html>

thumbnail.png