Ch. 11, Fig. 2 - D3.js in Action

This is the code for Chapter 11, Figure 2 from D3.js in Action that draws 2000 randomly generated geodata features (simple triangles) and renders them with SVG.

<html>
<head>
  <title>D3 in Action Chapter 11 - 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>
body, html {
    margin: 0;
  }
canvas {
  position: absolute;
  width: 500px;
  height: 500px;
}
svg {
  position: absolute;
  width:500px;
  height:500px;
}
path.country {
    fill: gray;
    stroke-width: 1;
    stroke: black;
    opacity: .5;
}
path.sample {
    stroke: black;
    stroke-width: 1px;
    fill: red;
    fill-opacity: .5;
}
line.link {
      stroke-width: 1px;
      stroke: black;
      stroke-opacity: .5;
}
circle.node {
  fill: red;
  stroke: white;
  stroke-width: 1px;
}
circle.xy {
  fill: pink;
  stroke: black;
  stroke-width: 1px;
}
</style>
<body>
<canvas height="500" width="500"></canvas>
<div id="viz">
  <svg></svg>
</div>
</body>
  <footer>
    
<script>
  sampleData = d3.range(2000).map(function(d) {
    var datapoint = {};
    datapoint.id = "Sample Feature " + d;
    datapoint.type = "Feature";
    datapoint.properties = {};
    datapoint.geometry = {};
    datapoint.geometry.type = "Polygon";
    datapoint.geometry.coordinates = randomCoords();
    return datapoint;
  })
  
  d3.json("world.geojson", function(data) {createMap(data)});

function createMap(countries) {
    projection = d3.geo.mercator().scale(100);
    geoPath = d3.geo.path().projection(projection);
    var g = d3.select("svg").append("g").attr("transform", "translate(-250,0)")

g.selectAll("path.country").data(countries.features)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .attr("class", "country")
    .style("fill", "gray")
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("opacity", .5)

g.selectAll("path.sample").data(sampleData)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .attr("class", "sample")
    .style("stroke", "black")
    .style("stroke-width", "1px")
    .style("fill", "red")
    .style("fill-opacity", .5)
    
    var mapZoom = d3.behavior.zoom().translate(projection.translate()).scale(projection.scale()).on("zoom", zoomed);
    d3.select("svg").call(mapZoom);
    
    function zoomed() {
      projection.translate(mapZoom.translate()).scale(mapZoom.scale());
      d3.selectAll("path.country").attr("d", geoPath);
      d3.selectAll("path.sample").attr("d", geoPath);
    }

}
  
  function randomCoords() {
    var randX = (Math.random() * 350) - 175;
    var randY = (Math.random() * 170) - 85;
    return [[[randX - 5,randY],[randX,randY - 5],[randX - 10,randY - 5],[randX - 5,randY]]];
  }
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js