display world map and use the html5 geolocation API in d3

_.md

[ Launch Inlet ]
Gist #3762317
See Previous Inlet [ Gist ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":364,"height":299,"hide":false},"editor_json0":{"vim":false,"emacs":false,"width":740,"height":194,"hide":true},"editor_json1":{"vim":false,"emacs":false,"width":713,"height":223,"hide":true}}

inlet.js

var countries = tributary.worldcountries;
var svg = d3.select("svg");

var cw = 600;
var ch = 429;

//adjust the origin to rotate the globe
var projection = d3.geo.azimuthal()
    .scale(205)
    .translate([285, 263])
    .origin([-109,28])
    
//then we need a path function
var geopath = d3.geo.path()
    .projection(projection);

var greatCircle = d3.geo.greatCircle()
    .origin(projection.origin())
    
//d:geopath is a shortcut for
//d:function(d) {return geopath(d)}
//by setting the id attribute of each path 
//to be the country's name in the data set,
//we can then easily select a path by name
//and for example remove it (like for Antarctica)
//setting greatCircle.clip prevents the back of the 
//world from showing through to the front
svg.selectAll("path")
  .data(countries.features)
  .enter()
  .append("path")
  .attr({
    d:function(d){return geopath(greatCircle.clip(d))},
    id: function(d) {return d.properties.name},
    fill:"#098F4E",
    stroke:"#FFFFFF"
  });


svg.select("#Antarctica").remove();


//html5 geolocation API
//you will get a prompt from your browser
//requesting access to location which you must approve
//before this will work
//d here is a Geoposition object
navigator.geolocation.getCurrentPosition(function(d) {
    //console.log(d);
  svg.append("circle")
    .attr({
      r:10,
      transform: function() {
      var coord = projection([d.coords.longitude,d.coords.latitude])
          return "translate("+coord+")"
      },
      fill:"#FF0000"
    })
})
  

worldcountries.json