satellite

_.md

[ Launch: satellite ] 5105295 by enjalot
[ Launch: satellite ] 4700685 by enjalot

config.json

{"description":"satellite","endpoint":"","display":"svg","public":true,"require":[{"name":"projection","url":"http://d3js.org/d3.geo.projection.v0.min.js"},{"name":"topojson","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"world110.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"us.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/hZFispE.png"}

inlet.js

//http://www.nytimes.com/interactive/2013/03/01/world/americas/border-graphic.html
var svg = d3.select("svg");

var width = tributary.sw;
var height = tributary.sh;

var world = tributary.world110;
var countries = topojson.object(world, world.objects.countries)
var us = tributary.us;
var states = topojson.object(us, us.objects.land);
var globe = {type: "Sphere"};

var projection = d3.geo.satellite()
    .distance(1.2)
    .scale(4000)
    .rotate([109.5, -23, 19])
    .center([0, 7.5])
    .translate([width / 2, height / 2])
    .tilt(30)
    .clipAngle(Math.acos(1 / 1.2) * 180 / Math.PI - 1e-6);

//var projection = d3.geo.mercator()
//.scale(650)

// The reference 74ºW, 41ºN is at 181px, 710px.
//var offset = projection.translate([-181, -710])([-74, 41]);
//projection.translate([-offset[0], -offset[1]]);

var graticule = d3.geo.graticule()
      //.extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])
    .step([5, 5]);

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

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

svg.append("path")
.datum(countries)
.attr("class", "land")
.attr("d", path);

style.css

.graticule {
  fill: none;
  stroke: red;
}
.land {
 fill: #787985;
  fill-opacity: .8;
  stroke: #000;
}

us.json

world110.json