D3 Examples - Simple Mercator Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";
        var margin = 75,
            width = 1400 - margin,
            height = 600 - margin;
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class', 'map');
​
            var projection = d3.geo.mercator()
              .scale(170) //Zoom in and out with the ratio
              .translate([width / 2, height / 1.5 ]); // set the center of the map
​
            var path = d3.geo.path().projection(projection);
​
            var map = svg.selectAll('path')
              .data(geo_data.features)
              .enter()
              .append('path')
              .attr('d', path)
              .style('fill', 'rgb(9,157,217)')
              .style('stroke', 'black')
              .style('stroke-width', 0.5);
            
      };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 to load the GeoJSON file
    */
    
d3.json("world_countries.json", draw);
  </script>
</body>
</html>
​
    