rotating orthographic globe to particular country's path

[Laura Malt Schneiderman]

There is probably a simple answer to this question, but I'm new to d3 and still learning about it. I have a globe, and I have a div with country names in it. When I click a country name, I want the globe to center on that country. I just can't figure out how to center the globe based not on lat/lng pairs but on a path's center. It must have something to do with centroid... .

var feature;

    var projection = d3.geo.azimuthal()
        .scale(zoom)
        .origin([-71.03,42.37])
        .mode("orthographic")
        .translate([380, 450]);

    var circle = d3.geo.greatCircle()
        .origin(projection.origin());

    var scale = {
      orthographic: 380,
      stereographic: 380,
      gnomonic: 380,
      equidistant: 380 / Math.PI * 2,
      equalarea: 380 / Math.SQRT2
    };

    var path = d3.geo.path()
        .projection(projection);


    var svg = d3.select("#globe").append("svg:svg")
        .attr("width", 800)
        .attr("height", 800)
        .on("dblclick", dblclick)
        .on("mousedown", mousedown);

    var g = svg.append("g");

    d3.json("simplified.geojson", function(collection) {

        g.append("g")
          .attr("id", "countries")
        g.append("g")
            .selectAll("path")
          .data(collection.features)
        .enter().append("svg:path")
          .attr("d", clip)
          .attr("id", function(d) { return d.properties.ISO3; })
          .attr("fill", function(d) { return d.properties.FILL; }) //change color and make clickable if data on this country exists
          .on("mouseover", pathOver)
          .on("mouseout", pathOut)
          .on( "dblclick", dblclick)
          .on("mousewheel.zoom", null)
          .on("click", click);

        feature = svg.selectAll("path");

        feature.append("svg:title")
          .text(function(d) { return d.properties.NAME; });

//here is where I want to be able to click a country name in the div and have the globe rotate to that country:

        $('.represented').click(function(){
                var countryabbrev = $(this).attr('id'); 
                projection.origin(projection.invert(#path.centroid(#CAN))); //this line is wrong
                refresh(1500);
                showPerson(countryabbrev)
            });

[Andy Thornton]

Laura -

This example should get you going in the right directions.

http://bl.ocks.org/mbostock/4183330

Cheers,

Andy

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Laura Malt Schneiderman]

Hi, Andy,

I've been studying this example for a few weeks, but I'm unable to make it work with my code. 

It's this line in my code that I think I have the wrong syntax for:

 projection.origin(projection.invert(#path.centroid(#CAN))); //this line is wrong

Do you know how to make that line correct?

[Marc Fawzi]

The # sign cannot be used for variable names

Sent from my iPhone

[Laura Malt Schneiderman]

OK, thank you!

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/vmLzOdq-dNw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.