title: rotate and center globe on click
body: <p>i have this code:</p>
  
  <pre><code>    d3.json("world-countries.json", function(collection) {
        feature = svg.selectAll("path")
            .data(collection.features)
            .enter().append("svg:path")
            .on("mouseover", function(d) { d3.select(this).style("fill",
                  "#ffffff"); })
            .on("mouseout", function(d) { d3.select(this).style("fill",
                  "#000000"); })
            .on("click", click)
            .attr("d", clip);
  </code></pre>
  
  <p>then my 'click' function is</p>
  
  <pre><code>    function click() {
          var o1 = projection.invert(d3.mouse(this));
          var lat = o1[0]
          lon = o1[1];
          console.log([o1]);
          projection.origin([o1]);
          circle.origin([o1]);
          refresh();
      }
  </code></pre>
  
  <p>and here is the demo <a href="http://bl.ocks.org/2876083" rel="nofollow">http://bl.ocks.org/2876083</a></p>
  
  <p>when i click on the svg, the map disappears!</p>
  
  <p>how would you make this so that, the globe rotates and centers on 'click' point?</p>