Untitled

<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
  </head>
  <body>
    <script>
      var width = 960;
      var height = 500;
      var projection = d3.geo.albers();
      var path = d3.geo.path().projection(projection);
      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      d3.json("us.json", function(error, us) {
        var statesData = topojson.feature(us, us.objects.states);
        var states = svg
          .selectAll("path.state")
          .data(statesData.features)
          .enter()
          .append("path")
          .classed("state", true)
          .attr("d", path)
          .style("fill", "blue")
          .style("stroke", "white")
          .style("stroke-width", 2)
          .style("fill-opacity", function() {
            return Math.random();
          });
      });
    </script>
  </body>
</html>