index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container-narrow {
margin: 0 auto;
max-width: 960px;
}
.container-narrow > hr {
margin: 30px 0;
}
.country {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
.country-boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
</style>
</head>
<body>
<div class="container-narrow">
<div class="row-fluid marketing">
<div class="span6" id="map">
</div>
</div>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 1160;
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("world-data-demo.json", function(error, world) {
svg.append("path")
.datum(topojson.object(world, world.objects.countries))
.attr("d", d3.geo.path().projection(d3.geo.mercator()))
.attr("class", "country");
});
</script>
</body>
</html>