rveciana - comparing-two-topojson-for-the-congressional-districts

Comparing two topojson for the congressional districts

Comparing two files with the congressional districts.

us_congress.json has better resolution, but some territories are not there: Guam, Marianas and American Samoa
us_territories has a very coarse resolution, as if a buffer had been aplied to the geometries. Puerto Rico and Virgin Islands are too close.

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

.states {
  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="http://d3js.org/topojson.v1.min.js"></script>
<script src="d3-composite-projections.js"></script>
<script>
var width = 960,
    height = 500;


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

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

svg.append("path")
  .datum({type: "Sphere"})
  .attr("d", path)
  .style("fill","#eee");
d3.json("us_congress.json", function(error, congress) {
  d3.json("us_territories.json", function(error, us) {


  svg.append("path")
      .attr("class", "us")
      .datum(topojson.feature(us, us.objects.us))
      .attr("d", path)
      .style("fill","#f33");

  svg.append("path")
      .attr("class", "us")
      .datum(topojson.feature(congress, congress.objects.cgd114p010g))
      .attr("d", path)
      .style("fill","#33f")
      .style("opacity",0.5);

});


});

</script>