Globe for Dan

<!DOCTYPE html>
<meta charset="utf-8">
<title>Globe Test</title>
<style>
#map {
  width: 1000px;
  margin: 0 auto;
}

#map h1 {
  position: absolute;
  width: 1000px;
}

.geo-globe {
	fill: rgba(0,0,0,0.1);
}

.foreground {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  pointer-events: all;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.foreground.zooming {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

.graticule {
  fill: none;
  stroke: #636B62;
  stroke-width: .5px;
  stroke-dasharray: 2,2;
}

.land {
  fill: #0066FF;
  stroke: none;
  pointer-events: all;
}

.mesh {
  stroke: #0000FF;
  stroke-width: .5px;
  fill: none;
}

.top {
    pointer-events: none;
}

.point {
  fill: #f00;
}
.countryTooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
  padding: 5px;
  text-align: left;
  border: solid #ccc 1px;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}
.water {
  fill: #DEE1E6;
  fill-opacity: 0.8;
}
.land {
  fill: #0066FF;
  fill-opacity: 0.8;
  stroke: none;
}
.land:hover {
  /*fill:#B2D1FF;*/
  fill: #0047B2;
  fill-opacity: 1;
}
</style>

var degrees = 180 / Math.PI,
    width = 800,
    height = 800;

d3.select(self.frameElement).style("height", height + "px");

var loader = d3.dispatch("world"), id = -1;

var projection = d3.geo.orthographic(width, height)
                       .precision(.5)
                       .clipAngle(90)
                       .clipExtent([[-1, -1], [width + 1, height + 1]])
                       .translate([width/2, height/2])
                       .scale(width / 2 - 10)
                       .rotate([0, -30]);

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

var svg = d3.select("body").append("svg")
                           .attr("width", width)
                           .attr("height", height);

var othersG = svg.append("g").attr("class", "other")
                             .attr("width", width)
                             .attr("height", height);

var countriesG = svg.append("g").attr("class", "countries")
                                    .attr("width", width)
                                    .attr("height", height);

var topG = svg.append("g").attr("class", "top")
                          .attr("width", width)
                          .attr("height", height);

var zoom = d3.geo.zoom().projection(projection)
                        .scaleExtent([projection.scale() * .7, projection.scale() * 10])
                        .on("zoom.redraw", function() {
                            svg.selectAll("path").attr("d", path);
                        });

var point;
    
queue()
.defer(d3.json, "map.topojson")
.defer(d3.tsv, "world-country-names.tsv")
.await(ready);

function mousedown() {
    console.log("mousedown");
    point = topG.insert("path", ".foreground")
                .datum({type: "Point", coordinates: projection.invert(d3.mouse(this)) })
                .attr("class", "point")
                .attr("d", path);
}

function mouseup() {
    console.log("mouseup");
    if (point) {
        point.remove();
        point = undefined;
    }
}

function ready(error, map, countryNames) {
    var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip");

var countryNamesById = {}

countryNames.forEach(function(d) {
          countryNamesById[d.id] = d.name;
    });

map.objects.countries.geometries.forEach(function(d) {
        d.properties = {};
        d.properties.name = countryNamesById[d.id];
    });

var graticule = othersG.append("path")
                        .datum(d3.geo.graticule())
                        .attr("class", "graticule")
                        .attr("d", path);

var sphere = othersG.append("path")
                        .datum({type: "Sphere"})
                        .attr("class", "foreground")
                        .attr("d", path)
                        .on("mousedown.grab", mousedown)
                        .on("mouseup.grab", mouseup)
                        .call(zoom);

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.js