Show HN: A Rogue State Along Two Rivers

Technically not off-topic, just a digression.

OK, I've been digging into this a bit further. When I do a request from a remote machine, I do get an Access-Control-Allow-Origin: * header, but from my local machine, this header is missing.

I assume that the proxy on this network discards the header and thus breaks the site.

Bylines are alphabetical in this case.

Since folks seem to be curious, here's the division of labor:

I pitched the idea, stitched together some Landsat photos as a proof of concept and a rough design, built out and implemented the page, worked on labels and city outlines, and helped out with picking some locations and editing.

Karen did most of the reporting and research on this. She's also responsible for much of the reporting on the ongoing map stack graphic.

Derek helped out with the Landsat color toning and burning in city shapes, built the locator map and the Baghdad odometer, and confirmed some of the statuses.

Archie worked on a ton of the writing, polished the design, and did a mountain of editing to boil it down to the essentials. He also kept everything coordinated, as a good Graphics Editor will do...

Nilkanth did some yeoman's work on tracing city shapes...

Bostock provided the final projections for both the Euphrates and Tigris maps, fixing my original broken projections.

The Baghdad bureau confirmed Karen's reporting, and added helpful notes and suggestions which were incorporated.

(apologies in advance if I forgot anything...)

We started on this one a couple of weeks ago, a few days after ISIS took Mosul, and it became clear that this was going to become an ongoing story.

The main way we (in Graphics) have been trying to keep up with the crisis is through this frequently updated stack of maps and charts:

http://www.nytimes.com/interactive/2014/06/12/world/middleea...

... so, this piece is intended to contrast with the stack, and be a bit larger in scope, a bit less news-item-y, and a bit of a deeper dive into the rich background of the situation.

That's an @dwtkns special. Mike Bostock helped with getting a D3 Rotated Transverse Mercator projection exactly aligned with our particular stitched-together crop of Landsat photos — so a lot of the geographic stuff in the graphic (the label placement, the city outlines, and the locator map) are powered by geographic coordinates instead of pixel positions. The "X Miles to Baghdad" works in the same fashion. Makes it way easier to place / resize / redraw things for all of the different widths this has to render at.

Edit:

Because this is a programming site, after all — let's share Mike's projection:

    // φ is the central meridian (e.g., 45° for UTM Zone 38)
    // θ is the screen rotation
    function rotatedTransverseMercator(φ, θ) {
      var π = Math.PI,
          cosθ = Math.cos(θ = -(90 + θ) / 180 * π),
          sinθ = Math.sin(θ);
    
      function raw(λ, φ) {
        var x = λ,
            y = Math.log(Math.tan(π / 4 + φ / 2));
        return [
          x * cosθ - y * sinθ,
          x * sinθ + y * cosθ
        ];
      }

      raw.invert = function(x, y) {
        return [
          x * cosθ + y * sinθ,
          2 * Math.atan(Math.exp(y * cosθ - x * sinθ)) - π / 2
        ];
      };

      var rotate = [-φ, 0, 90],
          rotation = d3.geo.rotation(rotate),
          projection = d3.geo.projection(raw).rotate(rotate),
          center = projection.center;

      projection.center = function(_) {
        return _
            ? center(rotation(_))
            : ((_ = center()), rotation.invert(_));
      };
    
      delete projection.rotate;
      return projection;
    }

He created Coffeescript, Backbone.js, and Underscore.js. Now works at NYT.