index.html

## readme-world-110m.json

      
        
            
              
              
            

          Raw
        
        
          
            
          
          
            
              readme-world-110m.json
            
          
        
      
    

  
      
  
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      Viewer requires iframe.
    
  

  

  

## index.html
<!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="http://d3js.org/d3.v3.js"></script>
<script src="http://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)

  var cities = createCities();
  var cityPoints = svg.append("g").attr("class", "points")
       .selectAll("path").data(cities)
       .enter().append("path")
       .attr("class", "cityPoint")
       .attr("d", path);

    svg.append("g")
        .attr("class", "label_background")
        .selectAll("rect").data(cities)
        .enter().append("rect")
        .attr("class", "label")
        .attr({x: 0, y: -11, height: 12})
        .attr("width", function(d,i) { return i === 0 ? 40 : 69;})
        .style("fill", "yellow")
        .style("opacity", 0.5);

    svg.append("g").attr("class","labels")
        .selectAll("text").data(cities)
      .enter().append("text")
      .attr("class", "label")
      .attr("text-anchor", "start")
      .text(function(d) { return d.properties.name })

    position_labels();
     debugger;
    rotateGlobe();
    // shrinkGlobe();

  function createCities() {
      var cities =  [
            { "type": "Feature", "properties": { "name": "Munich"  },
                "geometry": { "type": "Point", "coordinates": [ 11.581981, 48.135125 ] } },
            { "type": "Feature", "properties": { "name": "San Antonio"  },
                "geometry": { "type": "Point", "coordinates": [ -98.5, 29.4167 ] } },
            { "type": "Feature", "properties": { "name": "Melbourne"  },
            "geometry": { "type": "Point", "coordinates": [ 144.963056, -37.813611,  ] } }
            ];
	   return cities;
  }

  function position_labels() {
      var centerPos = projection.invert([width/2,height/2]);
      var arc = d3.geo.greatArc();

      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>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png