Mavromatika/index.html

## index.html
<!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>

## mapshaper_output_indented.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              mapshaper_output_indented.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>