D3 Examples - An updated spinny map to work with the new api's

xxxxxxxxxx
 
<!doctype html>
<html class="no-js" lang="en">
<meta charset="utf-8">
​
<style>
svg {
  width:  800px;
  height: 800px;
  pointer-events: all;
}
​
circle {
  fill: #dbe4f0;
}
​
path {
  fill: #aaa;
  stroke: #fff;
}
​
#header {
  top: 7px;
  left: 685px;
  text-align: right;
  width: auto;
}
​
#header div {
  font-size: 12px;
}
​
.tip { color: #999; }
</style>
​
<body>
  <div id="container">
  </div>
​
  <div id="body">
      <div id="header">
        d3.geo.azimuthal
        <div><label for="proj">Projection: </label><select id="proj">
          <option value="azimuthalEqualArea">azimuthalEqualArea</option>
          <option value="azimuthalEquidistant">azimuthalEquidistant </option>
          <option value="gnomonic">gnomonic</option>
          <option value="orthographic" selected>orthographic</option>
          <option value="stereographic">stereographic</option>
        </select></div>
        <div class="tip">drag to rotate the origin</div>
        <div><label for="animate">animate:</label>
          <input id="animate" type="checkbox" checked>
        </div>
      </div>
    </div>
  
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script>
​
  console.log('drawing like a bauss');
​
  var width = 800;
  var height = 800;
​
  var feature, // eventually: all svg paths (countries) of the world
      toggle; // animation on/off control
​
  var scale = {
    orthographic: 380,
    stereographic: 380,
    gnomonic: 380,
    azimuthalEquidistant: 380 / Math.PI * 2,
    azimuthalEqualArea: 380 / Math.SQRT2
  };
​
  var clipAngle = {
    orthographic: 90,
    stereographic: 90,
    gnomonic: 80,
    azimuthalEquidistant: 90,
    azimuthalEqualArea: 90
  };
​
  // var clipAngle = {
  //   orthographic: 90,
  //   stereographic: 170,
  //   gnomonic: 80,
  //   azimuthalEquidistant: 180 - 1e-3,
  //   azimuthalEqualArea: 180 - 1e-3
  // };
​
  var projections = {
    orthographic: d3.geo.orthographic().translate([width/2, height/2]).scale(scale.orthographic).clipAngle(clipAngle.orthographic),
    stereographic: d3.geo.stereographic().translate([width/2, height/2]).scale(scale.stereographic).clipAngle(clipAngle.stereographic),
    gnomonic: d3.geo.gnomonic().translate([width/2, height/2]).scale(scale.gnomonic).clipAngle(clipAngle.gnomonic),
    azimuthalEquidistant: d3.geo.azimuthalEquidistant().translate([width/2, height/2]).scale(scale.azimuthalEquidistant).clipAngle(clipAngle.azimuthalEquidistant),
    azimuthalEqualArea: d3.geo.azimuthalEqualArea().translate([width/2, height/2]).scale(scale.azimuthalEqualArea).clipAngle(clipAngle.azimuthalEqualArea)
  };
​
  var projection = projections.orthographic;
​
  var path = d3.geo.path()
      .projection(projection);
​
  var svg = d3.select("#body").append("svg:svg")
      .attr("width",  width)
      .attr("height", height)
      .on("mousedown", mousedown);
​
  if (frameElement) {
    frameElement.style.height = '800px';
  }
​
  d3.json("/jeremybuis/raw/5406962/world-50m.json", function(error, world) {
    var collection = topojson.feature(world, world.objects.subunits).features;
​
    feature = svg.selectAll("path")
        .data(collection)
      .enter().append("svg:path")
        .attr("d", clip);
​
    feature.append("svg:title")
        .text(function(d) { return d.properties.name; });
​
    startAnimation();
    d3.select('#animate').on('click', function () {
      if (done) {
        startAnimation();
      } else {
        stopAnimation();
      }
    });
  });
​
    function stopAnimation() {
      done = true;
      d3.select('#animate').node().checked = false;
    }
​
    function startAnimation() {
      done = false;
      d3.timer(function() {
        var origin = projection.center();
        var rotation = projection.rotate();
        rotation = [rotation[0] + 0.18, rotation[1] + 0.06];
        projection.rotate(rotation);
        refresh();
        return done;
      });
    }
​
    function animationState() {
      return 'animation: '+ (done ? 'off' : 'on');
    }
​
    d3.select(window)
        .on("mousemove", mousemove)
        .on("mouseup", mouseup);
  
    d3.select("select").on("change", function() {
      stopAnimation();
  
      projection = projections[this.value];
      path.projection(projection);
      // projection.mode(this.value).scale(scale[this.value]);
      refresh(750);
    });
​
    var m0, o0, done;
  
    function mousedown() {
      stopAnimation();
  
      m0 = [d3.event.pageX, d3.event.pageY];
      o0 = projection.rotate();
  
      d3.event.preventDefault();
    }
​
    function mousemove() {
      if (m0) {
        var m1 = [d3.event.pageX, d3.event.pageY],
            // o1 = [-1 * (o0[0] + (m0[0] - m1[0]) / 8), -1 * (o0[1] + (m1[1] - m0[1]) / 8)];
            o1 = [(o0[0] + (m0[0] - m1[0]) / 8), (o0[1] + (m1[1] - m0[1]) / 8)];
        projection.rotate(o1);
        refresh();
      }
    }
​
    function mouseup() {
      if (m0) {
        mousemove();
        m0 = null;
      }
    }
​
    function refresh(duration) {
      (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
    }
​
    function clip(d) {
      return path(d);
    }
​
    function reframe(css) {
      for (var name in css) {
        frameElement.style[name] = css[name] + 'px';
      }
    }
  </script>
  
</body>
</html>
    