rveciana - testing-albersusa-with-all-territories

Testing AlbersUsa with all territories

Open raw page in new tab

Testing the new albsersUsaTerritories projection, which includes all the territories represented in US Congress:

The next d3-composite-projections will include it.

The idea was by Micah Stubbs

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.countries {
  fill: #ccc;
  stroke: #fff;
}
</style>
<body>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>

<script src="https://d3js.org/d3-selection.v1.min.js"></script>

<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>

<script src="https://d3js.org/d3-path.v1.min.js"></script>

<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="d3-composite-projections.js"></script>

<script>
var width = 960,
    height = 502;

var projection = d3.geoAlbersUsaTerritories();
var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("us_territories.json", function(error, us) {

  svg.selectAll(".district")
      .data(topojson.feature(us, us.objects.us).features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill","#666")
      .style("stroke","#000")
      .on('click', function(d) {
            alert(d.properties.STATEFP + ": " + d.properties.NAMELSAD);
        });;

  svg
      .append("path")
        .style("fill","none")
        .style("stroke","#00f")
        .attr("d", projection.getCompositionBorders());

});

</script>