Adams

Done:

isolate one country, i.e. Italy
get its centroid

Todo:

rotate it around its centroid, i.e. 20 degrees
get axis aligned bounding box
get area of BB
iterate the previous for 1 degree angle in order to find the angle, alpha, of the minimum area BB
use alpha for rotating the flags in Boetti's map

forked from mbostock's block: Adams

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

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
}

</style>
<svg width="960" height="960"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="d3-geo-projection.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g")
//.attr("transform", "rotate(90 480,480)");

var projection = d3.geoOrthographic()
    .scale(214)
    .translate([width / 2, height / 2])
//		.center([12.20072474970115, 42.71596732156538])
	  .rotate([-12.20072474970115, -42.71596732156538, 0])
    .precision(0.1);

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

var graticule = d3.geoGraticule();

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

g.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path)
    .attr("fill", "none")
    .attr("stroke", "black");

var countries, italy, polyItaly;

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) {
  if (error) throw error;
  countries = topojson.feature(world, world.objects.countries).features;
  italy = countries.find(function(d) {return d.id === 380});
  var cc = d3.geoCentroid(italy);
  console.log(cc[0])
  
  g.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

g.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

g.selectAll(".country")
      .data(countries)
    .enter().insert("path", ".graticule")
      .attr("class", function(d) {return "country" + " id-" + d.id;})
      .attr("d", path);

g.selectAll("circle")
		.data([cc])
      .enter().insert("circle", ".graticule")
		.attr("cx", function (d) { return projection(d)[0]; })
		.attr("cy", function (d) { return projection(d)[1]; })
		.attr("r", "4px")
		.attr("fill", "red");
 
  polyItaly = g.select(".id-380");
  	polyItaly
      .style("fill", function(d, i) {
          return d3.color("yellow");
      });
//projection.center([12.2 , 42.72]).rotate([0, 0, 45]);
//projection.center([12.2 , 42.72,0]).rotate([0, 0, 0]);
  
  var pppp = d3.geoOrthographic()
    .scale(214)
    .translate([width / 2, height / 2])
		.center([12.20072474970115, 42.71596732156538])
//	  .rotate([-12.20072474970115, -42.71596732156538])
    .precision(0.1);

g.selectAll(".rotated-country")
      .data([italy])
    .enter().insert("path", ".graticule")
      .attr("class", function(d) {return "rotated-country" + " id-" + d.id + "-25";})
      .style("fill", function(d, i) {
          return d3.color("green");
      })
      .attr("d", d3.geoPath()
            .projection(pppp.rotate([12.20072474970115, -1.71596732156538, 0])));

});

</script>

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

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