just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":567,"height":618,"hide":true},"endpoint":"tributary","public":true,"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;

var projection = d3.geo.azimuthal()
    .scale(287)
    .translate([361, 421])
    .origin([-101, 30])
    
//then we need a path function
var geopath = d3.geo.path()
    .projection(projection);

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


//create a path for each country
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:"#03A009",
            stroke:"#FFFFFF",
        })
  

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



navigator.geolocation.getCurrentPosition(function(d) {
  console.log(d);
  svg.append("circle")
    .attr({
      r: 8,
      transform: function() {
        var coord = projection([d.coords.longitude, d.coords.latitude]);
        return "translate(" + coord + ")";
      },
      fill: "#239ADD",
      stroke: "#000FFF"
    })
})

inlet.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1920" height="974"></svg>