block by emeeks 4b3f4b7d23cc4d64cf87

Ch. 7, Fig. 3 - D3.js in Action

Full Screen

This is the code for Chapter 7, Figure 3 from D3.js in Action demonstrating how to load GeoJSON data and render it using d3.geo.path() and d3.geo.projection().

index.html

<html>
<head>
  <title>D3 in Action Chapter 7 - Example 1</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  
  .countries {
    fill: red;
    fill-opacity: .5;
    stroke: black;
    stroke-width: 1px;
  }

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
<div id="controls" />
</body>
  <footer>
    
<script>
  d3.json("world.geojson", createMap);
  
  function createMap(countries) {
    var aProjection = d3.geo.mercator();
    var geoPath = d3.geo.path().projection(aProjection);
    d3.select("svg").selectAll("path").data(countries.features)
    	.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
}

</script>
  </footer>

</html>