Satellite projection of Tunisia.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

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

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

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js