mohamed-ali · August 29, 2015 14:07
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .graticule {
  fill: none;
  stroke: #777;
 }

 .boundary {
  fill: #ccc;
  fill-opacity: .8;
  stroke: #000;
 }

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>
 <script>
 //satellite projection of tunisia 
 //


 var width = 800,
    height = 600;

 //what is a projection is general ? 
 var projection = d3.geo.satellite()
    .distance(1.1)
    .scale(5500)
    // what does rotate do? 
    //If rotation is specified, sets the projection’s three-axis rotation to the specified longitude, latitude and roll in degrees and returns the projection
    .rotate([-15, -31, -20])//rotate([36, 10, 32]) //([76.00, -34.50, 32.12])
    //center: changes the center of the overall globe 
    .center([-3, 6])
    //what tilt does?  after few tests, I still don't know ...
    .tilt(28)
    .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6) //doesn't change 
    .precision(.1);


 //what is a graticule? 
 //      a network of lines representing meridians and parallels, on which a map or plan can be represented.
 var graticule = d3.geo.graticule()
    // how to compute the major and minor extent for graticule ? 
    .extent([[-10, -40], [40 + 1e-6, 100 + 1e-6]])
    //step will define the dimensions of the rectangles within the map graticule 
    .step([2, 2]);

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

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

 svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

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

  svg.append("path")
      .datum(topojson.feature(topology, topology.objects.governorates))
      .attr("class", "boundary")
      .attr("d", path);
 });

 d3.select(self.frameElement).style("height", height + "px");

 </script>
diff --git a/tunisia.json b/tunisia.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.graticule {
	fill: none;
	stroke: #777;
	}

	.boundary {
	fill: #ccc;
	fill-opacity: .8;
	stroke: #000;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	//satellite projection of tunisia
	//


	var width = 800,
	height = 600;

	//what is a projection is general ?
	var projection = d3.geo.satellite()
	.distance(1.1)
	.scale(5500)
	// what does rotate do?
	//If rotation is specified, sets the projection’s three-axis rotation to the specified longitude, latitude and roll in degrees and returns the projection
	.rotate([-15, -31, -20])//rotate([36, 10, 32]) //([76.00, -34.50, 32.12])
	//center: changes the center of the overall globe
	.center([-3, 6])
	//what tilt does? after few tests, I still don't know ...
	.tilt(28)
	.clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6) //doesn't change
	.precision(.1);


	//what is a graticule?
	// a network of lines representing meridians and parallels, on which a map or plan can be represented.
	var graticule = d3.geo.graticule()
	// how to compute the major and minor extent for graticule ?
	.extent([[-10, -40], [40 + 1e-6, 100 + 1e-6]])
	//step will define the dimensions of the rectangles within the map graticule
	.step([2, 2]);

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

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

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

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

	svg.append("path")
	.datum(topojson.feature(topology, topology.objects.governorates))
	.attr("class", "boundary")
	.attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>