mohamed-ali · August 29, 2015 14:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta content="utf-8">
 	<style type="text/css">
 svg {
  border: 1px solid #ccc;
 }

 path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
 }

 path:hover {
  fill: #00AEEC;
 }

 #projectionList {

 	width: 200px; 
 	height: 500px; 
 	float: left; 

 	border: 1px solid grey;

 }

 	
 	
 	</style>

 </head>
 <body>

 <div id="mainContainer">

 	<div id="projectionList">

 	</div>

 	<div id="graphContainer">

 	</div>

 </div>


 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>
 <script type="text/javascript">


 	// d3.js graph 
 	var width = 600,
    	height = 500;

 	var path = d3.geo.path();

 	var svg = d3.select("#graphContainer").append("svg")
    	.attr("width", width)
    	.attr("height", height);

 	d3.json("tunisia.json", function(error, topology) {
  	
  	console.log(topology); 


  	//console.clear();

  	var featureCollection = topojson.feature(topology, topology.objects.governorates);
  	var bounds = d3.geo.bounds(featureCollection);
  
  	var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
      centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

  	var projection = d3.geo.mercator()
    	.scale(3000)
    	.center([centerX, centerY]);
    
  	path.projection(projection);
  
  	svg.selectAll("path")
      .data(featureCollection.features)
      .enter().append("path")
      .attr("d", path);
 	

 	});
 	
 	//end of d3.js graph 

 		var selectProjection = {projection_list: []}; 

 		// add the list of supported projection 

 		/*schema of objects: 

 			{
 				id: "unique_int", 
 				projection_name: "a name", 
 				projection_function: "a function name", 
 				projection_description: "a description"
 			}
 		*/

 		//add first projection 
 		selectProjection.projection_list.push({
 			id: 1, 
 			projection_name: "azimuthalEqualArea", // to be updated with a more descriptive name 
 			projection_function: "azimuthalEqualArea", 
 			projection_description: "azimuthalEqualArea" // to be updated with more detailed description 
 		}); 

 		// add second projection 

 		selectProjection.projection_list.push({
 			id: 2, 
 			projection_name: "conicConformal", // to be updated with a more descriptive name 
 			projection_function: "conicConformal", 
 			projection_description: "conicConformal" // to be updated with more detailed description 
 		});

 		// add thrid projection 

 		selectProjection.projection_list.push({
 			id: 3, 
 			projection_name: "equirectangular", // to be updated with a more descriptive name 
 			projection_function: "equirectangular", 
 			projection_description: "equirectangular" // to be updated with more detailed description 
 		});



 		selectProjection.projection_list.push({
 			id: 4, 
 			projection_name: "Mercator", // to be updated with a more descriptive name 
 			projection_function: "mercator", 
 			projection_description: "mercator" // to be updated with more detailed description 
 		});
 		// the above storage method is used temporary in order to leverage a demo, in production mode, there will be a database table to hold these information 


 		
 		function set_projection(option) {
 		  proj = option.value



 		  projection = eval("d3.geo."+proj+"().scale(500);");

 		  path = d3.geo.path()
 		    .projection(projection);

 		  svg.selectAll("path").transition()
 		      .duration(1000)
 		       .attr("d", path);
 		  
 		  /*var link = "https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-" + proj
 		  d3.selectAll("div#current_proj_info").html("Current projection: <a href=\""+link+"\">"+option.text+"</a>");*/
 		}



 		function apply_projection(e){
 			// applying a new projection 
 			set_projection(e.target[e.target.selectedIndex]); 
 		}

 		var newSelect = document.createElement("select");
 		newSelect.id = "selectProjection"; 
 		newSelect.onchange = apply_projection; 

 		

 		for (var i = selectProjection.projection_list.length - 1; i >= 0; i--) {
 			console.log(selectProjection.projection_list[i].projection_name); 

 			newSelect[newSelect.length] = new Option(selectProjection.projection_list[i].projection_name, selectProjection.projection_list[i].projection_function, false, false); 

 		};

 		document.getElementById('projectionList').appendChild(newSelect);

 </script>

 </body>
 </html>
diff --git a/tunisia.json b/tunisia.json
	<!DOCTYPE html>
	<html>
	<head>
	<meta content="utf-8">
	<style type="text/css">
	svg {
	border: 1px solid #ccc;
	}

	path {
	fill: #ccc;
	stroke: #fff;
	stroke-width: .5px;
	}

	path:hover {
	fill: #00AEEC;
	}

	#projectionList {

	width: 200px;
	height: 500px;
	float: left;

	border: 1px solid grey;

	}



	</style>

	</head>
	<body>

	<div id="mainContainer">

	<div id="projectionList">

	</div>

	<div id="graphContainer">

	</div>

	</div>


	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script type="text/javascript">


	// d3.js graph
	var width = 600,
	height = 500;

	var path = d3.geo.path();

	var svg = d3.select("#graphContainer").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("tunisia.json", function(error, topology) {

	console.log(topology);


	//console.clear();

	var featureCollection = topojson.feature(topology, topology.objects.governorates);
	var bounds = d3.geo.bounds(featureCollection);

	var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
	centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;

	var projection = d3.geo.mercator()
	.scale(3000)
	.center([centerX, centerY]);

	path.projection(projection);

	svg.selectAll("path")
	.data(featureCollection.features)
	.enter().append("path")
	.attr("d", path);


	});

	//end of d3.js graph

	var selectProjection = {projection_list: []};

	// add the list of supported projection

	/*schema of objects:

	{
	id: "unique_int",
	projection_name: "a name",
	projection_function: "a function name",
	projection_description: "a description"
	}
	*/

	//add first projection
	selectProjection.projection_list.push({
	id: 1,
	projection_name: "azimuthalEqualArea", // to be updated with a more descriptive name
	projection_function: "azimuthalEqualArea",
	projection_description: "azimuthalEqualArea" // to be updated with more detailed description
	});

	// add second projection

	selectProjection.projection_list.push({
	id: 2,
	projection_name: "conicConformal", // to be updated with a more descriptive name
	projection_function: "conicConformal",
	projection_description: "conicConformal" // to be updated with more detailed description
	});

	// add thrid projection

	selectProjection.projection_list.push({
	id: 3,
	projection_name: "equirectangular", // to be updated with a more descriptive name
	projection_function: "equirectangular",
	projection_description: "equirectangular" // to be updated with more detailed description
	});



	selectProjection.projection_list.push({
	id: 4,
	projection_name: "Mercator", // to be updated with a more descriptive name
	projection_function: "mercator",
	projection_description: "mercator" // to be updated with more detailed description
	});
	// the above storage method is used temporary in order to leverage a demo, in production mode, there will be a database table to hold these information



	function set_projection(option) {
	proj = option.value



	projection = eval("d3.geo."+proj+"().scale(500);");

	path = d3.geo.path()
	.projection(projection);

	svg.selectAll("path").transition()
	.duration(1000)
	.attr("d", path);

	/*var link = "https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-" + proj
	d3.selectAll("div#current_proj_info").html("Current projection: <a href=\""+link+"\">"+option.text+"</a>");*/
	}



	function apply_projection(e){
	// applying a new projection
	set_projection(e.target[e.target.selectedIndex]);
	}

	var newSelect = document.createElement("select");
	newSelect.id = "selectProjection";
	newSelect.onchange = apply_projection;



	for (var i = selectProjection.projection_list.length - 1; i >= 0; i--) {
	console.log(selectProjection.projection_list[i].projection_name);

	newSelect[newSelect.length] = new Option(selectProjection.projection_list[i].projection_name, selectProjection.projection_list[i].projection_function, false, false);

	};

	document.getElementById('projectionList').appendChild(newSelect);

	</script>

	</body>
	</html>