d3 world json example

_.md

[ Launch: d3 world json example ] 7068241 by colster

config.json

{"description":"d3 world json example ","endpoint":"","display":"svg","public":true,"require":[{"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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/evtXTKa.png","inline-console":false}

inlet.js

var svg = d3.select("svg");
var width = tributary.sw/2;
var height = tributary.sh/2;
var center = {
  x: width / 2,
  y: height / 2
}
var world = tributary.world110;

var countries = topojson.object(world, world.objects.land);

var lonlat = [-83,32];	 

var projection = d3.geo.orthographic()
//var projection = d3.geo.equirectangular()
	.scale(249)
	.translate([width / 2, height / 2])
	.rotate([-17,0,0])
	.center(lonlat);
	//.clipAngle(180);

var xy = projection(lonlat);

var graticule = d3.geo.graticule();

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

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

svg.append("path")
	.attr("transform", "translate(" + [xy[0] - center.x, xy[1] - center.y] + ")") 
	.attr("d", path(countries))
	.classed("land", true);

svg.append("circle")
.attr({
  cx: xy[0],
  cy: xy[1],
  r: 10
});

style.css

.land {
 
  fill:#6FC480;
  stroke:#000000;
}

circle {
 fill: #ffffff;
  stroke: #CC0A48;
  fill-opacity:0.2;
}

.graticule {
 	stroke:#CFCDCD; 
  	fill-opacity:0.5;
}

world110.json