D3 rotating globe and text

Question

Needing some help... i was able to find an example of a rotating globe, that works great, i even found a way to put red circles at a point. Even better to setup a timer and everything rotates with the globe great. But if i put text on the map at the same point as the red circles it shows up at the starting point that i placed it, but as the world turns the red circle moves with the globe, but the text is frozen at the points that it was written. i am trying to get the text to rotate with the world and the red circles. think in the country of united states i want to put a number, brazil would have number when the globe rotates to china the values would still be on the countries i put it and when it rotates US and Brazil back to the front the numbers are there showing. This is what i have in code, bear with me I am still a noob when working with D3. thanks for any input...

// Initialize some variables:
var element = '#home1',
width = $("#home1").width(),
height = $("#home1").height();

var diameter = 460,
radius = diameter/2,
velocity = .001,
then = Date.now();

var features, circles;

var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90);


// Save the path generator for the current projection:
var path = d3.geo.path()
.projection(projection)
.pointRadius( function(d,i) {
             return radius;
             });

// Define the longitude and latitude scales, which allow us to map lon/lat coordinates to pixel values:
var lambda = d3.scale.linear()
.domain([0, width])
.range([-180, 180]);

var phi = d3.scale.linear()
.domain([0, height])
.range([90, -90]);

// Create the drawing canvas:
var svg = d3.select("#home1").append("svg:svg")
.attr("width", diameter)
.attr("height", diameter);

//Create a base circle: (could use this to color oceans)
var backgroundCircle = svg.append("svg:circle")
.attr('cx', diameter / 2)
.attr('cy', diameter / 2)
.attr('r', 0)
.attr('class', 'geo-globe');

// Make a  tag to group all our countries, which is useful for zoom purposes. (child elements belong to a 'group', which we can zoom all-at-once)
var world = svg.append('svg:g');
var zoomScale = 1; // default

// Create the element group to mark individual locations:
var locations = svg.append('svg:g').attr('id', 'locations');

// Having defined the projection, update the backgroundCircle radius:
backgroundCircle.attr('r', projection.scale() );

// Construct our world map based on the projection:
d3.json('world-countries.json', function(collection) {

        features = world.selectAll('path')
        .data(collection.features)
        .enter()
        .append('svg:path')
        .attr('class', 'geo-path')
        .attr('d', path);

       // features.append('svg:title')
      //  .text( function(d) { return d.properties.name; });

    }); // end FUNCTION d3.json()


d3.json("data.geojson", function(collection) {
        console.log("2");



       cs = locations.selectAll('path')
        .data(collection.features)
        .enter().append('svg:path')
        .datum(function(d) {return {type: "Point", coordinates: [d.geometry.coordinates[0], d.geometry.coordinates[1]]}; })
        .attr('class', 'geo-node')
        .attr("d", path.pointRadius(5))
        .attr('d', path);



        cs1 = locations.selectAll('text')
        .data(collection.features)
        .enter().append('svg:text')
        .attr("transform", function(d) {return "translate(" + projection(d.geometry.coordinates) + ")"; })
        .attr("dy", ".35em")
        .attr('d', path)
        .text(function(d) { return d.properties.name; });

        }); // end FUNCTION d3.json()



d3.timer(function() {
         if(offpage === 0)
         {
            var angle = velocity * (Date.now() - then);

            projection.rotate([angle,0,0])

            svg.selectAll("path").attr("d", path.projection(projection));


         }
    });


d3.select(window)
.on("touchmove", mousemove)
.on("touchstart", mousedown);


function mousemove() {

    offpage = 0;
    }


function mousedown() {

    offpage=1
}

D3 rotating globe and text

Answers (1)

Related Questions