D3 Examples - Globe for Dan

xxxxxxxxxx
 
<!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>
​
<div id="map">
</div>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.js"></script>
<script src="d3.geo.zoom.min.js"></script>
<script src="d3.geo.projection.min.js"></script>
​
<body>
<script>
​
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);
                            
​
    var land = countriesG.selectAll("path.land")
                   .data(topojson.feature(map, map.objects.countries).features)
                 .enter().append("path")
                   .attr("class", "land")
                   .attr("d", path)
                   .on("mousedown.grab", mousedown)
                   .on("mouseup.grab", mouseup)
                   .on("mouseover.tooltip", function(d) {
                        countryTooltip.text(d.properties.name)
                            .style("left", d3.event.pageX + 7 + "px")
                            .style("top", d3.event.pageY - 15 + "px")
                            .style("display", "block");
                   })
                   .on("mouseout.tooltip", function(d) {
                        countryTooltip.style("display", "none");
                   })
                   .on("mousemove.tooltip", function(d) {
                        countryTooltip.style("left", d3.event.pageX + 7 + "px")
                                      .style("top", d3.event.pageY - 15 + "px");
                   })
                   .call(zoom);
}
        
</script>
</body>
</html>
​
    