World map practice

_.md

[ Launch: World map practice ] 6163630 by tarvaina

config.json

{"description":"World map practice","endpoint":"","display":"svg","public":true,"require":[{"name":"worldcountries","url":"https://raw.github.com/jinroh/d3experiments/master/world-50m.json"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/TbY9gXa.png"}

inlet.js

var countries = tributary.world;

var svg = d3.select('svg');

var colors = d3.scale.category20();

var projection = d3.geo.orthographic()
  .translate([473, 283])
  .scale(203)
  .clipAngle(90)
  .rotate([-21, -55]);

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

var countryShapes = svg.selectAll('.country').data(countries.features).enter()
  .append('path')
  .classed('country', true)
  .attr({
    d: function(d, i) { return geopath(d); },
    fill: function(d, i) { return colors(i); },
    stroke: "#000000",
    'stroke-width': 0.5
  });

navigator.geolocation.getCurrentPosition(function(d) {
  var coord = projection([d.coords.longitude, d.coords.latitude]);
  console.log(coord);  
  
  svg.append('circle')
    .attr({
      r: 4,
      transform: "translate(" + coord + ")"
    });
});

world.json