Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating D3 globe (d3.geo.azimuthal)

I have question about the d3 javascript libarary. I want to use the azimuthal globe and I want to insert points from longitude and lattitude coordinates on the globe and make the globe be animated without ever using the mouse events.

Do you think this is possible? Can you give me some good tips on how to do this?

Cheers Thor

like image 362
user1598238 Avatar asked Oct 07 '12 13:10

user1598238


People also ask

What is geoPath in d3?

The geographic path generator, d3. geoPath, is similar to the shape generators in d3-shape: given a GeoJSON geometry or feature object, it generates an SVG path data string or renders the path to a Canvas. Canvas is recommended for dynamic or interactive projections to improve performance.

What is d3 Geo projection?

# d3.geo.equirectangular() The equirectangular, or plate carrée projection, is the simplest possible geographic projection: the identity function. It is neither equal-area nor conformal, but is sometimes used for raster data. See raster reprojection for an example; the source image uses the equirectangular projection.

Which function can take GeoJSON and return SVG code to draw paths?

A geographic path generator is a function that takes a GeoJSON object and converts it into an SVG path string.


1 Answers

To make the example rotate on its own I implemented:

var newX = 185;
var newY = -200;

function setupRotate() {
    m0= [0,0];
    o0 = projection.origin();
  }

  function rotate() { 
    if (m0) {
      var m1 = [newX, newY];//d3.event.pageX, d3.event.pageY],
          o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
      projection.origin(o1);
      //console.log(m1);
      circle.origin(o1)
      refresh();
      //console.log("rotate");
      //console.log("newX: "+newX+"  newY: "+newY);
    }
  }

function rotateInterval() {
    var theRotationInterval = setInterval(rotateAndIncrement,1);
    function rotateAndIncrement(){
      //console.log("rotateAndIncrement");
      if (newX === 3)//3065) {
      {
       //console.warn("!!Reset Rotation!!");
       clearInterval(theRotationInterval);
       newX = 185;
       rotateInterval();
      }
      //console.log("newX: "+newX+"  newY: "+newY);
      else {
        newX++;
        rotate();
      }
    }
  }

I'm working on adding points to the map, it's much more complicated. If I cant get it working I'll post back here.

like image 109
Fred Avatar answered Sep 29 '22 17:09

Fred