D3 Examples - Orthographic Popout

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
  background: #323d4d;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  .countries {
    fill: #000;
    stroke: #323d4d;
  }
  .lakes {
    fill: #323d4d;
    stroke: none;
  }
  .ocean {
    fill: #323d4d;
  }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
​
var width = 960,
    height = 500,
    velocity = 0.005;
​
var projection = d3.geo.orthographic()
    .scale(250)
    .translate([width / 2, height / 2])
    .clipAngle(90);
​
var path = d3.geo.path()
    .projection(projection);
​
var λ = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);
​
var φ = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json("https://gist.githubusercontent.com/geraldarthur/48e2bcca4fc4bb7d7453/raw/59e1e9559355954924982cfde6877fcc6255ef93/ne_110m_globe.json", function(error, world) {
  if (error) throw error;
    svg.append("path")
      .datum(topojson.feature(world, world.objects.ocean))
      .attr("class", "ocean")
      .attr("d", path);
​
  svg.append("path")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("class", "countries")
      .attr("d", path);
 
  svg.append("path")
      .datum(topojson.feature(world, world.objects.lakes))
      .attr("class", "lakes")
      .attr("d", path);
});
  
d3.timer(function(elapsed) {
    projection.rotate([(elapsed * velocity)]);
  svg.selectAll("path").attr("d", path);
});
​
</script>
​
    