xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Mercator projection</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <style type="text/css"> body { background-color: #383838; } #container{ width: 1002px; margin-left:auto; margin-right:auto; } svg { background-color: #e3e3e3; } .label{ font-size: 3px; font-family: sans-serif; text-anchor: end; } .svg2{ border-left: 1px solid black; } .svg2 text{ font-size: 15px; font-family: sans-serif; } .grid { opacity: 0.9; } line.grid { stroke-width: 0.5; stroke: black; } .hide { visibility:hidden; } .overlay { opacity: 0; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> //Width and height var w = 800; var h = 600; var paddingLegend = 60; //Define map projection var projection = d3.geo.mercator() .center([ 0, 40 ]) .translate([ w/2, h/2 ]) .scale([ w/7 ]); //Define path generator var path = d3.geo.path() .projection(projection); //Create SVG var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h) .append("g") // important for zoom .call(d3.behavior.zoom().scaleExtent([1, 12]).on("zoom", zoom)) .append("g"); // important for the same reason (??) // Useful for dragging svg.append("rect") .attr("class", "overlay") .attr("width", w) .attr("height", h); var svg2 = d3.select("#container") .append("svg") .attr("class","svg2") .attr("width", 200) .attr("height", 600); var colors = ['#edf8fb','#b2e2e2','#66c2a4','#2ca25f','#006d2c']; var xScale = d3.scale.linear() .range([0, 170]) .domain([0, 4.5]); var dataCountries = [ {"code":"TD","level":1.1,"name":"Tchad"}, {"code":"MZ","level":1.4,"name":"Mozambique"}, {"code":"UG","level":1.4,"name":"Uganda"}, {"code":"KE","level":1.4,"name":"Kenya"}, {"code":"CM","level":2.6,"name":"Cameroon"}, {"code":"TZ","level":3.1,"name":"Tanzania"}, {"code":"AM","level":3.6,"name":"Armenia"}, {"code":"BI","level":3.6,"name":"Burundi"}, {"code":"KH","level":3.6,"name":"Cambodia"}, {"code":"MK","level":3.6,"name":"Macedonia"}, {"code":"RW","level":4.1,"name":"Rwanda"} ]; var arr = ["TD","MZ","UG","KE","CM","TZ","AM","BI","KH","MK","RW"]; //Create the list of countries with their level var donLignes = [1,2,3,4]; svg2.selectAll(".gridbar") .data(donLignes) .enter() .append("rect") .attr("class","grid gridbar") .attr("x",function(d){return xScale(d);}) .attr("y",48) .attr("width",function(d){return xScale(1);}) .attr("height",h-45) .attr("fill",function(d){return colors[d - 1];}); svg2.append("text") .attr("class","grid") .attr("x",10) .attr("y",20) .text("Implementation stages"); svg2.selectAll(".gridnumb") .data(donLignes) .enter() .append("text") .attr("class","grid gridnumb") .attr("x",function(d){return xScale(d) + 20;}) .attr("y",45) .text(function(d){return d;}); var lignes = svg2.selectAll("g") .data(dataCountries) .enter() .append("g"); lignes.append("text") .text(function(d){return d.name;}) .attr("x",10) .attr("y",function(d,i){ return i * (h - paddingLegend) / dataCountries.length + paddingLegend + 20; }); lignes.append("rect") .attr("x",10) .attr("y",function(d,i){ return i * (h - paddingLegend) / dataCountries.length + paddingLegend + 25; }) .attr("width",function(d){return xScale(d.level);}) .attr("height",6); //Load in GeoJSON data d3.json("mapshaper_output_indented.json", function(json) { //Bind data and create one path per GeoJSON feature svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("id", function(d){return d.properties.iso_a2;}) .attr("d", path) .attr("fill",function(d){ if (arr.indexOf(d.properties.iso_a2) == -1){ console.log("pas trouve"); return "#a0a0a0"; } else { var i = arr.indexOf(d.properties.iso_a2); return colors[Math.floor(dataCountries[i].level) - 1]; } }); svg.selectAll(".label") .data(json.features) .enter() .append("text") .attr("class","label") .classed("hide",function(d){ if (arr.indexOf(d.properties.iso_a2) == -1){ return true; } }) .attr("x",function(d){ var centroid = path.centroid(d); return centroid[0]; }) .attr("y",function(d){ var centroid = path.centroid(d); return centroid[1]; }) .text(function(d){ return d.properties.admin; }); }); // FOR ZOOM (stolen from Mike Bostock's example function zoom() { svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js