D3 Examples - World Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Mercator projection</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <style type="text/css">
            body {
                background-color: white;
            }
            h1 {
                font-size: 24px;
                margin: 5px;
                font-family: Helvetica, Arial, sans-serif;
            }
            svg {
                background-color: white;
            }
​
        </style>
    </head>
    <body>
        <h1>World Map</h1>
​
        <script type="text/javascript">
​
            var w = 1400;
            var h = 900;
​
            var projection = d3.geo.mercator()
                                   .translate([(w / 2) - 65, (h / 2) + 100])
                                   .scale([ w/5 ]);
​
            var path = d3.geo.path()
                             .projection(projection);
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            // From https://beta.foreignassistance.gov/js/libs/maps/lsib_world.topo.json
            d3.json("world_topo.json", function (world) {
                svg.datum(topojson.feature(world, world.objects.lsib_world))
                    .append('path')
                    .attr('class', 'country')
                    .attr('d', path)
                    .style("fill", "#ccc");
            });
        </script>
    </body>
</html>
    