D3 Examples - Adams

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
xxxxxxxxxx
 
<!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>
​
    