{"id":10553,"date":"2015-07-24T12:04:46","date_gmt":"2015-07-24T10:04:46","guid":{"rendered":"http:\/\/flaven.fr\/?p=10553"},"modified":"2026-09-16T10:11:06","modified_gmt":"2026-09-16T08:11:06","slug":"d3-javascript-geojson-creer-une-carte-avec-d3","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2015\/07\/d3-javascript-geojson-creer-une-carte-avec-d3\/","title":{"rendered":"D3, JavaScript, GeoJSON &#8211; Cr\u00e9er une carte avec D3"},"content":{"rendered":"<p>La promesse \u00e9tait d&#8217;explorer les possibilit\u00e9s offertes par la biblioth\u00e8que D3 en mati\u00e8re de cartographie, bon c&#8217;est chose faite. Faute de temps, d&#8217;imagination disons-le, on s&#8217;int\u00e9resse une fois encore qu&#8217;\u00e0 la technique plus qu&#8217;\u00e0 la pr\u00e9sentation d&#8217;un projet de A \u00e0 Z.<\/p>\n<p>Comme excuse, on peut affirmer sans doute que le champs des possibles est telle qu&#8217;avec une telle biblioth\u00e8que, on ne sait pas r\u00e9ellement dans quelle direction aller. Ainsi, cet article pr\u00e9sente les possibilit\u00e9s des D3 sans r\u00e9aliser un projet de A \u00e0 Z.<\/p>\n<p>Il a n\u00e9anmoins une vertu p\u00e9dagogique, il montre comment appr\u00e9hender progressivement du code. D\u2019aucun diront maladroitement, soit mais l&#8217;important ce que les sources sont au moins cit\u00e9es.<\/p>\n<p><strong>La plupart du code est tir\u00e9 d&#8217;un excellent blog d&#8217;un catalan du nom de Roger Veciana i Rovira. Cette article pr\u00e9sente juste \u00e9tape par \u00e9tape les \u00e9l\u00e9ments \u00e0 comprendre pour faciliter le maniement d&#8217;une carte avec D3 en l&#8217;occurence celle de la criminalit\u00e9 en Europe.<\/strong><\/p>\n<p>Source :<br \/>\n<a href=\"http:\/\/geoexamples.blogspot.fr\/2013\/10\/using-eurostats-data-with-d3js.html\" target=\"_blank\">http:\/\/geoexamples.blogspot.fr\/2013\/10\/using-eurostats-data-with-d3js.html<\/a><\/p>\n<p>On a isol\u00e9 les statistiques pour la France exclusivement. On garde bien \u00e9videmment les &#8220;headers&#8221; du csv. Il s&#8217;agit de ceux par d\u00e9faut du format t\u00e9l\u00e9charg\u00e9 depuis Eurostat.<\/p>\n<p><b>Extrait du fichier crim_gen_reg_1_Data_2.csv. Ces valeurs sont appel\u00e9s via cette ligne de code <code>d3.csv(\"crim_gen_reg_1_Data_2.csv\", function(stats)<\/code><\/b><\/p>\n<pre lang=\"text\">\r\n\tGEO\/TIME;2007;2008;2009;2010;2011\r\n\tFR;63826.1;64178.7;64504.5;64826.9;65161.3\r\n\tFR1;11629.1;11693.8;11757.2;11818.8;11883.1\r\n\tFR10;11629.1;11693.8;11757.2;11818.8;11883.1\r\n\tFR101;2202.2;2222.7;2239.0;2250.0;2262.3\r\n\t....\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_capture_0.jpg\" width=\"640\" height=\"480\" alt=\"D3, JavaScript, GeoJSON - Cr\u00e9er une carte avec D3\"><\/p>\n<p><b>On a modifi\u00e9 les Lignes 62 &#8211; 63 pour isoler les valeurs qui proviennent du csv afin de les imprimer dans la console.<\/b><\/p>\n<pre lang=\"javascript\">\r\n  \r\n  \/* \"TIME\",\"GEO\",\"UNIT\",\"CRIM\",\"Value\" *\/\r\n  var time = \"time => \"+d.TIME;\r\n  var geo = \"geo => \"+d.GEO;\r\n  var unit = \"geo => \"+d.UNIT;\r\n  var crim = \"crim => \"+d.CRIM;\r\n  var value = \"value => \"+data[d.GEO];\r\n  \r\n  \/* information about the stats *\/\r\n   \/\/ console.log(time+\"\\n\"+geo+\"\\n\"+unit+\"\\n\"+crim+\"\\n\"+value+\"\\n\");\r\n<\/pre>\n<p><b>On imprime donc seulement les donn\u00e9es sur la France<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_capture_1.jpg\" width=\"640\" height=\"480\" alt=\"D3, JavaScript, GeoJSON - Cr\u00e9er une carte avec D3\"><\/p>\n<p><b>Les donn\u00e9es compl\u00e8tes charg\u00e9es dans la carte d&#8217;Europe compl\u00e8teipt<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_capture_4.jpg\" width=\"640\" height=\"480\" alt=\"D3, JavaScript, GeoJSON - Cr\u00e9er une carte avec D3\"><\/p>\n<pre lang=\"javascript\">\r\n\td3.json(\"regions_1.json\", function(error, europe)\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_capture_2.jpg\" width=\"640\" height=\"480\" alt=\"D3, JavaScript, GeoJSON - Cr\u00e9er une carte avec D3\"><\/p>\n<pre lang=\"javascript\">\r\n  \t  \t  \/* \"NUTS_ID\",\"NAME\" *\/\r\n  \t\t  var RegionNameId = \"RegionNameId => \"+d.properties.NUTS_ID;\r\n  \t  \t  var RegionName = \"RegionName => \"+d.properties.NAME;\r\n  \t\t \/\/ console.log(RegionNameId+\"\\n\"+RegionName);\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_capture_3.jpg\" width=\"640\" height=\"480\" alt=\"D3, JavaScript, GeoJSON - Cr\u00e9er une carte avec D3\"><\/p>\n<p><b>Code source de la page chargeant la criminalit\u00e9<\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n\t&lt;!DOCTYPE html&gt;\r\n\t&lt;meta charset=\"utf-8\"&gt;\r\n\t&lt;title&gt;Crimes recorded by the police - NUTS 3 regions&lt;\/title&gt;\r\n\t&lt;style&gt;\r\n\r\n\t.background {\r\n\t  fill: #fff;\r\n\t  stroke: #ccc;\r\n\t}\r\n\t.tooltip {\r\n\t\t\tbackground-color:rgba(255,255,0,0.9);;\r\n\t\t\tmargin: 10px;\r\n\t\t\theight: 90px;\r\n\t        width: 150px;\r\n\t        padding-left: 10px; \r\n\t        padding-top: 10px;\r\n\t    -webkit-border-radius:10px;\r\n\t    -moz-border-radius:10px;\r\n\t    border-radius:10px;\r\n\t        }\r\n\t&lt;\/style&gt;\r\n\t&lt;body&gt;\r\n\t&lt;h2&gt;Crimes recorded by the police - NUTS 3 regions&lt;\/h2&gt;\r\n\t&lt;div id=\"map\"&gt;&lt;\/div&gt;\r\n\t&lt;script src=\"js\/d3.v3.min.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script src=\"js\/topojson.v1.min.js\"&gt;&lt;\/script&gt;\r\n\t&lt;script type=\"text\/javascript\" src=\"js\/tooltip.js\"&gt;&lt;\/script&gt;\r\n\r\n\t&lt;script&gt;\r\n\tvar width = 600,  \r\n\t    height = 600;  \r\n  \r\n\tvar projection = d3.geo.stereographic()  \r\n\t    .center([3.9,43.0])  \r\n\t    .scale(1000)  \r\n\t    \/\/ .translate([width \/ 4 , height \/ 2]); \r\n\t    .translate([width \/ 6 , height \/ 3]); \r\n\r\n\tvar path = d3.geo.path()  \r\n\t    .projection(projection);\r\n\r\n\tvar svg = d3.select(\"#map\").append(\"svg\")\r\n\t    .attr(\"width\", 960)\r\n\t    .attr(\"height\", 500);\r\n\r\n\r\n\tvar color = d3.scale.linear().domain([0,5]).range([&#x27;blue&#x27;, &#x27;red&#x27;]);\r\n\r\n\td3.csv(\"crim_gen_reg_1_Data_2.csv\", function(stats) {\r\n\t  data = {};\r\n\t  stats.forEach(function(d) {\r\n\t    if (d.TIME == 2010){\r\n\t      data[d.GEO] = d.Value;\r\n\t  \r\n\t\t  \/* \"TIME\",\"GEO\",\"UNIT\",\"CRIM\",\"Value\" *\/\r\n\t\t  var time = \"time =&gt; \"+d.TIME;\r\n\t\t  var geo = \"geo =&gt; \"+d.GEO;\r\n\t\t  var unit = \"geo =&gt; \"+d.UNIT;\r\n\t\t  var crim = \"crim =&gt; \"+d.CRIM;\r\n\t\t  var value = \"value =&gt; \"+data[d.GEO];\r\n\r\n\t\t  \/* information about the stats *\/\r\n\t\t  \/\/ console.log(time+\"\\n\"+geo+\"\\n\"+unit+\"\\n\"+crim+\"\\n\"+value+\"\\n\");\r\n\r\n\t    }\r\n\t  });\r\n  \r\n\t  d3.json(\"regions_1.json\", function(error, europe) {\r\n\t\tsvg.selectAll(\".region\")\r\n\r\n\t\t.data(topojson.feature(europe, europe.objects.regions).features)\r\n\t  .enter()\r\n\t    .append(\"path\")\r\n\t    .filter(function(d) { return !isNaN(parseFloat(data[d.properties.NUTS_ID])); \r\n\t\t}) \r\n\t      .attr(\"class\", \"region\")\r\n\t      .attr(\"d\", path)\r\n\t      .style(\"stroke\", \"#999\")\r\n\t      .style(\"stroke-width\", 0.2)\r\n\t      .style(\"fill\", function(d) {\r\n\t        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))\r\n\t          return color(100000*data[d.properties.NUTS_ID]\/d.properties.POPULATION);\r\n\t        else\r\n\t          return \"#999\";\r\n\t      })\r\n\t      .style(\"opacity\", function(d){\r\n\t        if (!isNaN(parseFloat(data[d.properties.NUTS_ID])))\r\n\t          return 1;\r\n\t        else\r\n\t          return 0;\r\n\t      })\r\n      \r\n\t      .call(d3.helper.tooltip(function(d, i){return tooltipText(d);}));\r\n\r\n\r\n\t    function tooltipText(d){\r\n\t           if (isNaN(parseFloat(data[d.properties.NUTS_ID]))) {\r\n\t            var crimes = \"No Data\";\r\n\t           } else {\r\n\t            var crimes = data[d.properties.NUTS_ID];\r\n\t\t\t\r\n\t  \t  \t  \/* \"NUTS_ID\",\"NAME\" *\/\r\n\t  \t\t  var RegionNameId = \"RegionNameId =&gt; \"+d.properties.NUTS_ID;\r\n\t  \t  \t  var RegionName = \"RegionName =&gt; \"+d.properties.NAME;\r\n\t  \t\t  \/\/ console.log(RegionNameId+\"\\n\"+RegionName);\r\n\t\t\t\r\n\t           }\r\n\t           return \"&lt;b&gt;\" + d.properties.NAME + \"&lt;\/b&gt;\"\r\n\t                  + \"&lt;br\/&gt; pop: \" + d.properties.POPULATION \r\n\t                  + \"&lt;br\/&gt; crimes: \" + crimes;\r\n\t      }\r\n\t});\r\n\t});\r\n\t&lt;\/script&gt;\r\n\r\n\r\n\t&lt;footer&gt;Source: &lt;a href=\"http:\/\/epp.eurostat.ec.europa.eu\/portal\/page\/portal\/crime\/data\/database\"&gt;eurostat&lt;\/a&gt;&lt;\/footer&gt;\r\n\t\t\r\n\t\r\n<\/pre>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>D3.js Tips and Tricks<br \/><a href=\"http:\/\/www.d3noob.org\/2013\/03\/a-simple-d3js-map-explained.html\" target=\"_blank\">http:\/\/www.d3noob.org\/2013\/03\/a-simple-d3js-map-explained.html<\/a><\/li>\n<li>Using D3.js with Maps<br \/><a href=\"https:\/\/blog.safaribooksonline.com\/2014\/02\/11\/d3-js-maps\/\" target=\"_blank\">https:\/\/blog.safaribooksonline.com\/2014\/02\/11\/d3-js-maps\/<\/a><\/li>\n<li>Gallery of Visualization, visualize topics related to government and web technology.<br \/>\n<br \/><a href=\"http:\/\/zbryikt.github.io\/visualize\/\" target=\"_blank\">http:\/\/zbryikt.github.io\/visualize\/<\/a><\/li>\n<li>La chaine youtube d3Vienno<br \/><a href=\"https:\/\/www.youtube.com\/channel\/UCNYL0ZF2j8-OSGZ4iHBLNPA\" target=\"_blank\">https:\/\/www.youtube.com\/channel\/UCNYL0ZF2j8-OSGZ4iHBLNPA<\/a><\/li>\n<li>Making a map of germany with topojson<br \/><a href=\"https:\/\/milkator.wordpress.com\/2013\/02\/25\/making-a-map-of-germany-with-topojson\/\" target=\"_blank\">https:\/\/milkator.wordpress.com\/2013\/02\/25\/making-a-map-of-germany-with-topojson\/<\/a><\/li>\n<li>Let\u2019s Make a Map by Mike Bostock<br \/><a href=\"http:\/\/bost.ocks.org\/mike\/map\/\" target=\"_blank\">http:\/\/bost.ocks.org\/mike\/map\/<\/a><\/li>\n<li>Marriage and divorce statistics<br \/><a href=\"http:\/\/ec.europa.eu\/eurostat\/statistics-explained\/index.php\/Marriage_and_divorce_statistics\" target=\"_blank\">http:\/\/ec.europa.eu\/eurostat\/statistics-explained\/index.php\/Marriage_and_divorce_statistics<\/a><\/li>\n<li> Eurostat, toutes les statistiques europ\u00e9ennes<br \/><a href=\"http:\/\/ec.europa.eu\/eurostat\/home\" target=\"_blank\">http:\/\/ec.europa.eu\/eurostat\/home<\/a><\/li>\n<li>Pas mal de donn\u00e9es de Eurostat<br \/><a href=\"http:\/\/ec.europa.eu\/eurostat\/data\/database\" target=\"_blank\">http:\/\/ec.europa.eu\/eurostat\/data\/database<\/a><\/li>\n<li>Using EUROSTAT&#8217;s data with D3.js<br \/><a href=\"http:\/\/geoexamples.blogspot.fr\/2013\/10\/using-eurostats-data-with-d3js.html\" target=\"_blank\">http:\/\/geoexamples.blogspot.fr\/2013\/10\/using-eurostats-data-with-d3js.html<\/a><\/li>\n<li>What is Kartograph?<br \/><a href=\"http:\/\/kartograph.org\/\" target=\"_blank\">http:\/\/kartograph.org\/<\/a><\/li>\n<li>Gregor Aisch, a graphics editor at The New York Times with a passion for visualization. <br \/><a href=\"http:\/\/driven-by-data.net\/\" target=\"_blank\">http:\/\/driven-by-data.net\/<\/a><\/li>\n<li>A Map to Perfection: Using D3.js to Make Beautiful Web Maps<br \/><a href=\"http:\/\/www.toptal.com\/javascript\/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps\" target=\"_blank\">http:\/\/www.toptal.com\/javascript\/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps<\/a><\/li>\n<li>Geo Paths<br \/><a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Geo-Paths\" target=\"_blank\">https:\/\/github.com\/mbostock\/d3\/wiki\/Geo-Paths<\/a><\/li>\n<li>D3 Geodata Basics \u2013 A Map Overlay can have many Faces<br \/><a href=\"http:\/\/www.digital-geography.com\/d3-geodata-basics-a-map-overlay-can-have-many-faces\/\" target=\"_blank\">http:\/\/www.digital-geography.com\/d3-geodata-basics-a-map-overlay-can-have-many-faces\/<\/a><\/li>\n<li>Mapping with D3js: Canvas or SVG?<br \/><a href=\"http:\/\/geoexamples.blogspot.fr\/2013\/02\/mapping-with-d3js-canvas-or-svg.html\" target=\"_blank\">http:\/\/geoexamples.blogspot.fr\/2013\/02\/mapping-with-d3js-canvas-or-svg.html<\/a><\/li>\n<li>a fun, difficult introduction to d3<br \/><a href=\"http:\/\/www.macwright.org\/presentations\/dcjq\/\" target=\"_blank\">http:\/\/www.macwright.org\/presentations\/dcjq\/<\/a><\/li>\n<li>Create Maps With D3<br \/><a href=\"http:\/\/www.vapidspace.com\/coding\/2014\/03\/18\/create-maps-with-d3\/\" target=\"_blank\">http:\/\/www.vapidspace.com\/coding\/2014\/03\/18\/create-maps-with-d3\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>La promesse \u00e9tait d&#8217;explorer les possibilit\u00e9s offertes par la biblioth\u00e8que D3 en mati\u00e8re de cartographie, bon c&#8217;est chose faite. Faute de temps, d&#8217;imagination disons-le, on&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2015\/07\/d3-javascript-geojson-creer-une-carte-avec-d3\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">D3, JavaScript, GeoJSON &#8211; Cr\u00e9er une carte avec D3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10561,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"D3, JavaScript, GeoJSON: Mastering map creation with D3. This guide covers tools and outcomes for progressive coding.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3439,3440,3444,3450,3451,3435],"tags":[2258,3510,277,2167,2168,2170,2171,2173,226,2262,2169,20,2172,606,2174],"class_list":["post-10553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apis-integration","category-cloud-infrastructure","category-programming-databases","category-ux-product-design","category-web-design-front-end","category-web-development","tag-analyse","tag-canva","tag-carte","tag-d3","tag-data-visualization","tag-dataviz","tag-elements-de-langage","tag-geojson","tag-javascript","tag-journalisme","tag-mike-bostock","tag-php","tag-sahand-saba","tag-storytelling","tag-topojson"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2Kd","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2015\/07\/d3_geo_b.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10553"}],"version-history":[{"count":4,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10553\/revisions"}],"predecessor-version":[{"id":10564,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10553\/revisions\/10564"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10561"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}