mohamed-ali/index.html

## 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>

## tunisia.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tunisia.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.
	<!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>