whatsthebeef/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

   .graticule {
      fill: none;
      stroke: #777;
      stroke-opacity: .5;
      stroke-width: .5px;
   }

   .land {
      fill: #222;
   }

   .boundary {
      fill: none;
      stroke: #fff;
      stroke-width: .5px;
   }

   .route {
      fill: none;
      stroke: blue;
      stroke-width: 1px;
   }

</style>
<body>
   <div id="root"></div>
   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://d3js.org/topojson.v1.min.js"></script>
   <script src="http://d3js.org/queue.v1.min.js"></script>
   <script>

var G = (function(d3){

   return {
      init : function(){

         this.ui = {};

         var width = G.ui.width = 960;
         var height = G.ui.height = 770;

         var projection = this.ui.projection = d3.geo.mercator()
         .scale((width + 1) / 2 / Math.PI)
         .translate([width / 2, height / 2])
         .precision(.1);

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

         queue()
         .defer(d3.json, "http://bl.ocks.org/mbostock/raw/4090846/world-50m.json")
         .await(this.ready);

      },

      ready : function(error, world, points, interactions) {

         var path = G.ui.path;
         var projection = G.ui.projection;
         var width = G.ui.width;
         var height = G.ui.height;

         var svg = G.ui.svg = d3.select("#root").insert("svg", "#instructions")
         .attr("id", "map")
         .attr("width", width)
         .attr("height", height);

         var self = this;

         var countries = topojson.feature(world, world.objects.countries).features;

         svg.selectAll("path:not(.graticule)")
         .data(countries, function(d){
            d.code = "1";
            return d;
         })
         // .data(countries)
         .enter().append("path")
         .attr("d", path)

      }
   }
})(d3);

G.init();

   </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.graticule {
	fill: none;
	stroke: #777;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.land {
	fill: #222;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.route {
	fill: none;
	stroke: blue;
	stroke-width: 1px;
	}

	</style>
	<body>
	<div id="root"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script>

	var G = (function(d3){

	return {
	init : function(){

	this.ui = {};

	var width = G.ui.width = 960;
	var height = G.ui.height = 770;

	var projection = this.ui.projection = d3.geo.mercator()
	.scale((width + 1) / 2 / Math.PI)
	.translate([width / 2, height / 2])
	.precision(.1);

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

	queue()
	.defer(d3.json, "http://bl.ocks.org/mbostock/raw/4090846/world-50m.json")
	.await(this.ready);

	},

	ready : function(error, world, points, interactions) {

	var path = G.ui.path;
	var projection = G.ui.projection;
	var width = G.ui.width;
	var height = G.ui.height;

	var svg = G.ui.svg = d3.select("#root").insert("svg", "#instructions")
	.attr("id", "map")
	.attr("width", width)
	.attr("height", height);

	var self = this;

	var countries = topojson.feature(world, world.objects.countries).features;

	svg.selectAll("path:not(.graticule)")
	.data(countries, function(d){
	d.code = "1";
	return d;
	})
	// .data(countries)
	.enter().append("path")
	.attr("d", path)

	}
	}
	})(d3);

	G.init();

	</script>
	</body>