World Map

<!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>

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>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js