whatsthebeef · December 22, 2015 19:18
diff --git a/index.html b/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) {

         var path = G.ui.path;
         var projection = G.ui.projection;
         var width = G.ui.width;
         var height = G.ui.height;
         
         var zoom = d3.behavior.zoom()
         .translate(projection.translate())
         .scale(projection.scale())
         .scaleExtent([height, height*6])
         .on("zoom", redraw);

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

         var svg  = svg1.append("g")
         .call(zoom);
         
         var cd = [{
            cx:20,
            cy:20,
            r:4
         }];
      
         var countries = topojson.feature(world, world.objects.countries).features;
      
         svg.selectAll("path")
         .data(countries)
         .enter().append("path")
         .attr("d", path);
         
         svg.selectAll("circle")
         .data(cd)
         .enter()
         .append("circle")
         .attr("cx", function(d){
            return projection([parseInt(d.cx), parseInt(d.cy)])[0];
         })
         .attr("cy", function(d){
            return projection([parseInt(d.cx), parseInt(d.cy)])[1];
         })
         .attr("r", function(d){
            return parseInt(d.r)
         })
         .attr("fill", "white");
         
         function redraw() {
            projection.translate(d3.event.translate).scale(d3.event.scale);
            svg.selectAll("path").attr("d", path);
            svg.selectAll("circle")                   
            .attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
            .attr("r", function(d) { return cd[0].r/d3.event.scale; });
         }  
      }
   }
 })(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) {

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

	var zoom = d3.behavior.zoom()
	.translate(projection.translate())
	.scale(projection.scale())
	.scaleExtent([height, height*6])
	.on("zoom", redraw);

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

	var svg = svg1.append("g")
	.call(zoom);

	var cd = [{
	cx:20,
	cy:20,
	r:4
	}];

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

	svg.selectAll("path")
	.data(countries)
	.enter().append("path")
	.attr("d", path);

	svg.selectAll("circle")
	.data(cd)
	.enter()
	.append("circle")
	.attr("cx", function(d){
	return projection([parseInt(d.cx), parseInt(d.cy)])[0];
	})
	.attr("cy", function(d){
	return projection([parseInt(d.cx), parseInt(d.cy)])[1];
	})
	.attr("r", function(d){
	return parseInt(d.r)
	})
	.attr("fill", "white");

	function redraw() {
	projection.translate(d3.event.translate).scale(d3.event.scale);
	svg.selectAll("path").attr("d", path);
	svg.selectAll("circle")
	.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
	.attr("r", function(d) { return cd[0].r/d3.event.scale; });
	}
	}
	}
	})(d3);

	G.init();

	</script>
	</body>