Satellite Projection Explorer

I've always found it difficult to wrap my head around the settings for satellite projections in D3.js, so I built this little tool to try to find the right settings for my satellite projection. You can drag the canvas to adjust the lambda and phi rotatations (the first to elements of your projection.rotate() array) and use the gamma buttons to for the gamma rotation. If that's all Greek to you, look here:

</mbostock/4282586>

Zoom in and out to adjust projection scale. Tilt and Distance are particular to satellite. Notice that certain settings cause D3 to break and make art.

The panning of the globe has issues because it recenters on pan, I'll try to fix that, just realize that the pan-rotating will be a pain. Also notice that the zoomed() function clips the cities only based on the [0] position of the rotate array, so that could be better, too.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Satellite Projection Explorer</title>
  <meta charset="utf-8" />
</head>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<style>

</style>
<body onload="satelliteMap();">
<div id="controls">
</div>
<div id="vizcontainer">
<svg style="width:500px;height:500px;border:1px lightgray solid;" />
<div style="position:absolute;top:30px;left:10px;" id="settings" />
</div>

<footer>
<script>
function satelliteMap() {
    queue()
    .defer(d3.json, "world_g.json")
    .defer(d3.csv, "cities.csv")
    .await(function(error, file1, file2) { createMap(file1, file2); });
    
  function createMap(countries, cities) {
    expData = countries;
    width = 500;
    height = 500;
    projection = d3.geo.satellite()
    .scale(350)
    .translate([250,250])
    .rotate([0, 0, 0])
    .center([0,0])
    .tilt(30)
    .distance(1.5)
    .clipAngle(45)
    geoPath = d3.geo.path().projection(projection);
    
    var mapZoom = d3.behavior.zoom().translate(projection.translate()).scale(projection.scale()).on("zoom", zoomed);
    d3.select("svg").call(mapZoom);
    
    var xRotate = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

var yRotate = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);

d3.select("svg").on("mousedown", startRotating).on("mouseup", stopRotating);
    
    function startRotating() {
     d3.select("svg").on("mousemove", function() {
  var p = d3.mouse(this);
  projection.rotate([xRotate(p[0]), yRotate(p[1]), projection.rotate()[2]]);
 zoomed();
});
    }

}
    
    function zoomButton(zoomDirection) {
      if (zoomDirection == "in") {
        var newZoom = mapZoom.scale() * 1.5;
        var newX = ((mapZoom.translate()[0] - (width / 2)) * 1.5) + width / 2;
        var newY = ((mapZoom.translate()[1] - (height / 2)) * 1.5) + height / 2;
  }
  else if (zoomDirection == "out") {
      var newZoom = mapZoom.scale() * .75;
      var newX = ((mapZoom.translate()[0] - (width / 2)) * .75) + width / 2;
      var newY = ((mapZoom.translate()[1] - (height / 2)) * .75) + height / 2;    
  }

mapZoom.scale(newZoom).translate([newX,newY])
  zoomed();
}

d3.select("#controls").append("button").on("click", function () {zoomButton("in")}).html("Zoom +");
d3.select("#controls").append("button").on("click", function () {zoomButton("out")}).html("Zoom -");
d3.select("#controls").append("button").on("click", function () {gammaRotate("less")}).html("Gamma -");
d3.select("#controls").append("button").on("click", function () {gammaRotate("more")}).html("Gamma +");
d3.select("#controls").append("button").on("click", function () {tiltAdjust("less")}).html("Tilt -");
d3.select("#controls").append("button").on("click", function () {tiltAdjust("more")}).html("Tilt +");
d3.select("#controls").append("button").on("click", function () {distanceAdjust("less")}).html("Distance -");
d3.select("#controls").append("button").on("click", function () {distanceAdjust("more")}).html("Distance +");

featureSize = d3.extent(countries.features, function(d) {return geoPath.area(d)});
    countryColor = d3.scale.quantize().domain(featureSize).range(colorbrewer.Reds[7]);

var graticule = d3.geo.graticule();
    
    d3.select("svg").append("path")
    .datum(graticule)
    .attr("class", "graticule line")
    .attr("d", geoPath)
    .style("fill", "none")
    .style("stroke", "lightgray")
    .style("stroke-width", "1px");
    
    d3.select("svg").selectAll("path.countries").data(countries.features)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .attr("class", "countries")
    .style("fill", function(d) {return countryColor(geoPath.area(d))})
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("opacity", .5)
    .on("mouseover", centerBounds)
    .on("mouseout", clearCenterBounds)

d3.select("svg").selectAll("circle").data(cities)
    .enter()
    .append("circle")
    .attr("class", "cities")
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", 1)
    .attr("r", 3)
    .attr("cx", function(d) {return projection([d.y,d.x])[0]})
    .attr("cy", function(d) {return projection([d.y,d.x])[1]})
    
    function centerBounds(d,i) {
      thisBounds = geoPath.bounds(d);
      thisCenter = geoPath.centroid(d);
      d3.select("svg")
      .append("rect")
      .attr("class", "bbox")
      .attr("x", thisBounds[0][0])
      .attr("y", thisBounds[0][1])
      .attr("width", thisBounds[1][0] - thisBounds[0][0])
      .attr("height", thisBounds[1][1] - thisBounds[0][1])
      .style("fill", "none")
      .style("stroke-dasharray", "5 5")
      .style("stroke", "black")
      .style("stroke-width", 2)
      .style("pointer-events", "none")
      
      d3.select("svg")
      .append("circle")
      .attr("class", "centroid")
      .attr("r", 5)
      .attr("cx", thisCenter[0]).attr("cy", thisCenter[1])
      .style("pointer-events", "none")
    }
    function clearCenterBounds() {
      d3.selectAll("circle.centroid").remove();
      d3.selectAll("rect.bbox").remove();
    }
  }
  
}
</script>
</footer>
</body>
</html>

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/queue.v1.min.js to a secure url

Modified http://d3js.org/colorbrewer.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/queue.v1.min.js

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