add USA with territories represented in US Congress

[micahstubbs]

so I'm following these instructions for generating topojson for US Congressional districts

from this shapefile data for 114th Congress from US census available at
ftp://ftp2.census.gov/geo/tiger/TIGER2016/CD/

and I realize, whoa, there are several distant lands of the US beyond Alaska and Hawaii

it would be cool to add a d3-composite-projection that includes the territories represented by the non-voting members of the U.S. House of Representatives

American Samoa
Guam
Northern Mariana Islands
Puerto Rico
U.S. Virgin Islands

[micahstubbs]

will start working on this. would be cool if another contributor with more knowledge were to get it working first 😄

[micahstubbs]

it looks like it should be possible to create this by forking the Albers USA composite projection and adding the additional geography with the same pattern used to add Alaska and Hawaii

https://github.com/rveciana/d3-composite-projections/blob/master/src/albersUsa-proj.js

[micahstubbs]

(small) progress! just rendered a map with the d3-composite albersUSA projection and a different topojson file.

I think that I need to use a topojson file that contains the small island territories I want to show. Since the topojson file us.json from this nice example doesn't have geometry for all of the islands I want to show (though strangely it does have Puerto Rico and some hard-to-identify Pacific islands). So instead I use tl_2015_us_cd114_2pc.json which I created with mapshaper from the shapefile linked above.

link to the line of code where I change the topojson file

I already notice that the names of features vary from one topojson file to another. It also looks like the way that people represent boundaries like states also varies. In one case the topojson is nested, in the other it is more flat with features like the state loaded on as properties. hhhhmmm.

Next, I will try to show the boundaries on the individual congressional districts on the map. Then, I will add the positions for one of the islands (probably Guam) to the composite projection and see if I can get the island on screen.

[micahstubbs]

took a closer look at the two geographies, before compositing. I want to make sure that the islands I want to are indeed in the geography I'm using (that is, the topojson file I created from the shapefile I downloaded). here's some screenshot prototypes that I marked up with GIMP

first us.json, the geography from the project example

then tl_2015_us_cd114_2pc.json which is the congressional districts geography

[micahstubbs]

if we log out the topojson into the console, we can see its structure

console.log('us', us);

[micahstubbs]

so I searched this // ESRI:102007 comment above Hawaii

and found a similar listing for American Samoa

progress!

[micahstubbs]

found the docs for projection.rotate(). note that we're still work with d3 version 3x, so we look at that the docs for that version.

@
https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md#rotate

[micahstubbs]

likewise

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md#center

[micahstubbs]

learning more about standard parallels

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md#conicConformal_parallels

http://support.esri.com/other-resources/gis-dictionary/term/standard%20parallel

[micahstubbs]

a first effort at adding American Samoa

got the path that shows the boundaries between the composite projections to render. that's something!

so many parameters to tune...

https://github.com/micahstubbs/d3-composite-projections/blob/composite-usa/src/albersCompositeUsa-proj.js

[micahstubbs]

the current best effort, as an anonymous block on blockbuilder
http://blockbuilder.org/anonymous/07f95ff1b01125f8150dbad1b7f586c5#mode=sidebyside

[rveciana]

I'll take your topojson example to see all the lands. When I have an example, I'll send it!

[micahstubbs]

@rveciana that would be delightful 😄

[micahstubbs]

latest conversation, for anyone following along at home https://twitter.com/rveciana/status/772118057649074176

[rveciana]

I'll put some information here:
The projection you suggested works when changed to
d3.geoConicConformal().center([-170, -14.267]).parallels([-24, -14]).scale(2000);
But the result is rotated, so the islands don't have the north at the top, which can be weird:
The google maps, where north is the upper side of the screen look like this: https://www.google.es/maps/place/Samoa+Nord-americana/@-14.0893802,-171.8807741,8.75z/data=!4m5!3m4!1s0x71a513a364ec1003:0xa6870c9674617872!8m2!3d-13.759029!4d-172.104629
Besides, the origin I have used is the typical Natural Earth file world-50m.json, since the one you gave has a strange coast line:

Now I'll try with a latlon projection directly, because is also used: http://spatialreference.org/ref/epsg/american-samoa-1962/ and the latitude is ok to do so.
I'll post the image

[rveciana]

The platee caree projection
d3.geoEquirectangular().rotate([172, 14]).scale(3200);
gives this result

which seems much better.

[rveciana]

The code:

<!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>
var width = 960,
    height = 500;


var projection = d3.geoEquirectangular().rotate([172, 14]).scale(3200);
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("world-50m.json", function(error, us) {

  svg.append("path")
      .attr("class", "us")
      .datum(topojson.feature(us, us.objects.countries))
      .attr("d", path)

      d3.select("svg").on("mousedown.log", function() {
  console.log(projection.invert(d3.mouse(this)));
});


});

</script>

[micahstubbs]

@rveciana thanks for putting the information here 😄

using the other projection and the world-50m.json does look like a good idea. since the islands of American Samoa are together only one congressional district, we do not lose any internal administrative (congressional district) boundaries by switching the geography we use.

[rveciana]

First working version: http://bl.ocks.org/rveciana/ce5936de720ebb83aafecb35dfd9531a
Besides the Puerto Rico border, which must be fixed, do you find some error? Guam + Northern Mariana Islands are together since they are actually very close. And Puerto Rico and Virgin islands too.

[micahstubbs]

👍 will take a closer look

[micahstubbs]

by the way, thanks for introducing me to console.info() 😄
https://developer.mozilla.org/en-US/docs/Web/API/Console/info

line that uses console.info()

[micahstubbs]

got the first working version running locally for my closer look. some first impressions:

it makes sense to use one view (and one blue composition border) for the islands that are near to each other, like Puerto Rico and the US Virgin Islands. that said, now I want some method of identifying which islands belong to which named territory (as my own geography knowledge of these islands is not as good as I would like, so I cannot recognize all of them from the shape alone 😅 ). looking up the US Virgin Islands on another map does help figure out which islands are part of the Puerto Rico territory and which islands are part of the US Virgin Islands territory:

one solution to make individual territories distinct in an example like this is to draw a path between the different territories inside of a shared composition boundary.

another possible solution is a mouseover event that shows a tooltip. if I log out d, i, nodes, this from the mouseover event, I get the features for all of the map. This makes sense when I remember that our map is one big SVG path element.

If I remember correctly, the way to find the specific place under the mouse cursor in x, y screen coordinates is to invert the projection and use the resulting [longitude, latitude] to determine what territory (or congressional district, in this case) the mouse is currently over.

here are the d3.geo v4 docs for projection.invert(point)

working on figuring this part out now 😄

[micahstubbs]

one other step I'd like to do for this example, that I've overlooked so far:

You’ll probably want to combine the TopoJSON file with the land and states features from us.json, since in most maps you’ll want to clip the congressional districts to the land boundary, and draw some additional boundary between states. That can be done by combining TopoJSON files using multiple input arguments to the topojson binary.

from @mbostock's StackOverflow answer about creating a congressional district map in d3 (without territories)

[rveciana]

I've changed the block so an alert showing the district appears when a region is clicked.
The Puerto Rico /Virgin Islands case is really complicated to separate with the topojson you passed, while with Guam/Marianas is possible.
I'll try to draw the lines, but the map is very small and I think that the result will be quite ugly.
The MikeBost0ck's solution is good too, but I don't know anything about these Congressional Districts. Do they always correspond to a county or more, or a county can be divided in different districts? If the last case doesn't happen, creating a new topojson shouldn't be too difficult.

[micahstubbs]

Good question. A US congressional district is a political district within a US state (and occasionally contains an entire state). The congressional districts have no formal relationship with US counties.

[micahstubbs]

creating a new topojson file will be a good learning exercise for me 😄

[micahstubbs]

when I click, I do see an alert. nice!

[micahstubbs]

ah, the way we do the data binding is the difference here. before we had one path. now we have many paths, with one for each district. now this makes sense 👌

diff from the gist

[micahstubbs]

this might be useful https://github.com/bradoyler/atlas-make/tree/master/us-congress

[rveciana]

Oh, this is much better!
http://bl.ocks.org/rveciana/57ab45aad3cda72b879a9a96498a2394

Some territories are not present, but I'll try to add them from the world-50m file. The examples will improve a lot, thank you.

[rveciana]

Finally, I'm more or less satisfied with this dataset & projection:
http://bl.ocks.org/rveciana/fe6b452c853146e674dd6dd09c1cc6e3

[micahstubbs]

very nice! will post here when I finish the original project that inspired this feature request :-)

[rveciana]

Thank you! If people uses it, I'll be really happy.