D3, JavaScript, GeoJSON – Créer une carte avec D3

by Posted on

La promesse était d’explorer les possibilités offertes par la bibliothèque D3 en matière de cartographie, bon c’est chose faite. Faute de temps, d’imagination disons-le, on s’intéresse une fois encore qu’à la technique plus qu’à la présentation d’un projet de A à Z.

Comme excuse, on peut affirmer sans doute que le champs des possibles est telle qu’avec une telle bibliothèque, on ne sait pas réellement dans quelle direction aller. Ainsi, cet article présente les possibilités des D3 sans réaliser un projet de A à Z.

Il a néanmoins une vertu pédagogique, il montre comment appréhender progressivement du code. D’aucun diront maladroitement, soit mais l’important ce que les sources sont au moins citées.

La plupart du code est tiré d’un excellent blog d’un catalan du nom de Roger Veciana i Rovira. Cette article présente juste étape par étape les éléments à comprendre pour faciliter le maniement d’une carte avec D3 en l’occurence celle de la criminalité en Europe.

Source :
http://geoexamples.blogspot.fr/2013/10/using-eurostats-data-with-d3js.html

On a isolé les statistiques pour la France exclusivement. On garde bien évidemment les “headers” du csv. Il s’agit de ceux par défaut du format téléchargé depuis Eurostat.

Extrait du fichier crim_gen_reg_1_Data_2.csv. Ces valeurs sont appelés via cette ligne de code d3.csv("crim_gen_reg_1_Data_2.csv", function(stats)

	GEO/TIME;2007;2008;2009;2010;2011
	FR;63826.1;64178.7;64504.5;64826.9;65161.3
	FR1;11629.1;11693.8;11757.2;11818.8;11883.1
	FR10;11629.1;11693.8;11757.2;11818.8;11883.1
	FR101;2202.2;2222.7;2239.0;2250.0;2262.3
	....

D3, JavaScript, GeoJSON - Créer une carte avec D3

On a modifié les Lignes 62 – 63 pour isoler les valeurs qui proviennent du csv afin de les imprimer dans la console.

 
  /* "TIME","GEO","UNIT","CRIM","Value" */
  var time = "time => "+d.TIME;
  var geo = "geo => "+d.GEO;
  var unit = "geo => "+d.UNIT;
  var crim = "crim => "+d.CRIM;
  var value = "value => "+data[d.GEO];
 
  /* information about the stats */
   // console.log(time+"\n"+geo+"\n"+unit+"\n"+crim+"\n"+value+"\n");

On imprime donc seulement les données sur la France
D3, JavaScript, GeoJSON - Créer une carte avec D3

Les données complètes chargées dans la carte d’Europe complèteipt
D3, JavaScript, GeoJSON - Créer une carte avec D3

	d3.json("regions_1.json", function(error, europe)

D3, JavaScript, GeoJSON - Créer une carte avec D3

  	  	  /* "NUTS_ID","NAME" */
  		  var RegionNameId = "RegionNameId => "+d.properties.NUTS_ID;
  	  	  var RegionName = "RegionName => "+d.properties.NAME;
  		 // console.log(RegionNameId+"\n"+RegionName);

D3, JavaScript, GeoJSON - Créer une carte avec D3

Code source de la page chargeant la criminalité

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Crimes recorded by the police - NUTS 3 regions</title>
	<style>
 
	.background {
	  fill: #fff;
	  stroke: #ccc;
	}
	.tooltip {
			background-color:rgba(255,255,0,0.9);;
			margin: 10px;
			height: 90px;
	        width: 150px;
	        padding-left: 10px; 
	        padding-top: 10px;
	    -webkit-border-radius:10px;
	    -moz-border-radius:10px;
	    border-radius:10px;
	        }
	</style>
	<body>
	<h2>Crimes recorded by the police - NUTS 3 regions</h2>
	<div id="map"></div>
	<script src="js/d3.v3.min.js"></script>
	<script src="js/topojson.v1.min.js"></script>
	<script type="text/javascript" src="js/tooltip.js"></script>
 
	<script>
	var width = 600,  
	    height = 600;  
 
	var projection = d3.geo.stereographic()  
	    .center([3.9,43.0])  
	    .scale(1000)  
	    // .translate([width / 4 , height / 2]); 
	    .translate([width / 6 , height / 3]); 
 
	var path = d3.geo.path()  
	    .projection(projection);
 
	var svg = d3.select("#map").append("svg")
	    .attr("width", 960)
	    .attr("height", 500);
 
 
	var color = d3.scale.linear().domain([0,5]).range([&#x27;blue&#x27;, &#x27;red&#x27;]);
 
	d3.csv("crim_gen_reg_1_Data_2.csv", function(stats) {
	  data = {};
	  stats.forEach(function(d) {
	    if (d.TIME == 2010){
	      data[d.GEO] = d.Value;
 
		  /* "TIME","GEO","UNIT","CRIM","Value" */
		  var time = "time => "+d.TIME;
		  var geo = "geo => "+d.GEO;
		  var unit = "geo => "+d.UNIT;
		  var crim = "crim => "+d.CRIM;
		  var value = "value => "+data[d.GEO];
 
		  /* information about the stats */
		  // console.log(time+"\n"+geo+"\n"+unit+"\n"+crim+"\n"+value+"\n");
 
	    }
	  });
 
	  d3.json("regions_1.json", function(error, europe) {
		svg.selectAll(".region")
 
		.data(topojson.feature(europe, europe.objects.regions).features)
	  .enter()
	    .append("path")
	    .filter(function(d) { return !isNaN(parseFloat(data[d.properties.NUTS_ID])); 
		}) 
	      .attr("class", "region")
	      .attr("d", path)
	      .style("stroke", "#999")
	      .style("stroke-width", 0.2)
	      .style("fill", function(d) {
	        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))
	          return color(100000*data[d.properties.NUTS_ID]/d.properties.POPULATION);
	        else
	          return "#999";
	      })
	      .style("opacity", function(d){
	        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))
	          return 1;
	        else
	          return 0;
	      })
 
	      .call(d3.helper.tooltip(function(d, i){return tooltipText(d);}));
 
 
	    function tooltipText(d){
	           if (isNaN(parseFloat(data[d.properties.NUTS_ID]))) {
	            var crimes = "No Data";
	           } else {
	            var crimes = data[d.properties.NUTS_ID];
 
	  	  	  /* "NUTS_ID","NAME" */
	  		  var RegionNameId = "RegionNameId => "+d.properties.NUTS_ID;
	  	  	  var RegionName = "RegionName => "+d.properties.NAME;
	  		  // console.log(RegionNameId+"\n"+RegionName);
 
	           }
	           return "<b>" + d.properties.NAME + "</b>"
	                  + "<br/> pop: " + d.properties.POPULATION 
	                  + "<br/> crimes: " + crimes;
	      }
	});
	});
	</script>
 
 
	<footer>Source: <a href="http://epp.eurostat.ec.europa.eu/portal/page/portal/crime/data/database">eurostat</a></footer>

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts