Rotating globe

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country {
  fill: green;
  stroke: darkgrey;
  stroke-width: .5px;
  stroke-linejoin: round;
}

.background {
    fill: lightblue;
}

.graticule {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: .5px;
}

.graticule-outline {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}

.cityPoint {
  fill: yellow;
  stroke: black;
  opacity:.6;
}

.labels {
    font: 12px sans-serif;
    fill: black;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
	height = 500;
	
var rotate = [.001, 0],
	velocity = [.013, 0],
	time = Date.now();
	
var centroid = d3.geo.path()
	.projection(function(d) { return d; })
	.centroid;

var projection = d3.geo.orthographic()
    .scale(125)
    .clipAngle(90);

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

var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
var ocean = svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "background")
    .attr("d", path);
        
var graticuleLine = svg.append("path")
    .attr("class", "graticule")
    .attr("d", path);

svg.append("circle")
    .attr("class", "graticule-outline")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", projection.scale())

d3.json("readme-world-110m.json", function(error, world) {
  var countries = topojson.object(world, world.objects.countries).geometries,
      i = -1,
      n = countries.length;

var country = svg.selectAll(".country")
      .data(countries)
      .enter()
      .insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path)

svg.selectAll(".label")
        .attr("transform", function(d) {
          var loc = projection(d.geometry.coordinates),
            x = loc[0],
            y = loc[1];
          var offset = 5;
          return "translate(" + (x+offset) + "," + (y-2) + ")"
        })
        .style("display",function(d) {
          var d = arc.distance({source: d.geometry.coordinates, target: centerPos});
          return (d > 1.57) ? 'none' : 'inline';
        });
    }
  
  function rotateGlobe() {  
     d3.timer(function() {
        var dt = Date.now() - time;
        projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
        redraw();
    });
  }
  
  function shrinkGlobe() {    
    redrawTransition(2500);
	// projection.scale(200);
    // redrawTransition(2500);
  }
  
  function redraw() {
		country.attr("d", path);
        graticuleLine.attr("d", path);
        cityPoints.attr("d", path);
        position_labels();
  }
 
  function redrawTransition(mSeconds) {
		projection.scale(50);
        
		ocean.transition().duration(mSeconds).attr("d", path);
        country.transition().duration(mSeconds).attr("d", path);
        graticuleLine.transition().duration(mSeconds).attr("d", path);
        cityPoints.attr("d", path);
        position_labels();
  } 
});
</script>

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

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

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

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