choropleth-bounds.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <style type="text/css">

svg {
  background: #eee;
  width: 960px;
  height: 500px;
}

#counties path {
  stroke: steelblue;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var svg = d3.select("body")
  .append("svg");

var counties = svg.append("g")
    .attr("id", "counties");

var path = d3.geo.path();

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", function(d) {
        return path({
          type: "LineString",
          coordinates: d3.geo.bounds(d)
        });
      });
});

    </script>
  </body>
</html>