Carte PBF v2

<!DOCTYPE html>
<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