6518269 by whatsthebeef

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="//d3js.org/d3.v3.min.js"></script>
   <script src="//d3js.org/topojson.v1.min.js"></script>
   <script src="//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, "//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>