Show HN: A Rogue State Along Two Rivers

https://www.nytimes.com/interactive/2014/07/03/world/middleeast/syria-iraq-isis-rogue-state-along-two-rivers.html

by jashkenas • 12 years ago

212 48 12 years ago

nytimes.com

jashkenas9• 12 years ago

Happy to answer questions about this, if folks have any...

pokpokpok• 12 years ago

How many people do you expect to read this article? greater than 1 million?

akilism• 12 years ago

How long does something like this take you guys to create from start to finish? Are there plans for a behind the scenes article @ source?

jashkenas9• 12 years ago

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.

alexqgb• 12 years ago

No questions, just wanted to say that this is magnificent work. The "X miles to Baghdad" is an especially nice touch.

jashkenas9• 12 years ago

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;
    }

pcl• 12 years ago

It's incredibly cool that you got a by-line, and the lead position for that matter. Is that due to the work you did coding the project, or because of your role coming up with the idea, mentioned in your other comment [1], or because of some other journalism you did on the project that you haven't mentioned?

[1] https://news.ycombinator.com/item?id=7986383

jashkenas9• 12 years ago

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...)

JunkDNA• 12 years ago

This is just awesome. Even on my iphone it is a compelling experience.

MichaelAO• 12 years ago

Great work. First looked at it on desktop and was pleasantly surprised with how well it worked on mobile. Any advice or tools you'd recommend to create something similar?

fredsters_s• 12 years ago

Is this a legit Show HN? It looks more like an article from the New York times to me.

austinz2• 12 years ago

I assume that since "Jeremy Ashkenas" is listed as an author, and the submitter is "jashkenas", that this is a legit Show HN. Although, since it is a NYTimes.com article, it would be easy to assume otherwise at first glance.

jewel• 12 years ago

I think so, based on my reading of the guidelines. jashkenas, a regular poster here at HN, is almost certainly designed and programmed the scrolling illustration.

malokai• 12 years ago

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

jashkenas9• 12 years ago

It's legit. The New York Times is people too ;)

dang2• 12 years ago

We did look it over with that question in mind, but "something you've made that people can play with" [1] really does seem to apply here. And unexpected cases can be particularly interesting.

1. https://news.ycombinator.com/showhn.html

yitchelle• 12 years ago

I think that whether this is a legit Show HN or not is irrelevant.

I come to HN to find interesting articles dealing tech, business, life. Aside from the content itself, I really like the way the information is presented. It generates great interest, for me anyway.

panarky2• 12 years ago

This is one of the most effective infographics I've seen, right up there with Napoleon's March to Moscow[1]. I spent at least an hour with it this morning and it changed my understanding of Iraq, Syria and ISIL.

I'm used to thinking in terms of national borders, but this shows how the population is organized by the Tigris and Euphrates, not by artificial lines on a map.

ISIL understands this well, making the Iraq/Syria border into a pretty meaningless imaginary line. The ISIL blitz seems like it came from nowhere, but this dramatically illustrates their methodical progression, over time, following the rivers.

I found myself wanting to know more about the communities, lakes, dams, roads, borders, sects, nationalities other features highlighted in this piece, so I spent another hour manually linking to Google Earth and Wikipedia to drill into more detail.

Along the way I found a lot of content on YouTube of ISIL takeovers of cities, burning of vehicles and disturbing images of executions and crucifixions. I'd seen some of this before, but it would be really powerful to link selected videos and images from the ground directly to places on the map.

I'd be interested in the editorial process at the NYT, how this evolved from idea to realization, who supplied the content, and how the development team coordinated with the reporters.

And I'd like to understand more about how the autonomous Kurdish region fits into this story, both geographically as well as politically and militarily.

[1] http://www.edwardtufte.com/tufte/posters

jashkenas9• 12 years ago

Thanks for the kind words. I'm glad to hear it sparked a Wikipedia quest for you...

The idea here was to try and find some sort of larger set piece graphic we could bring to bear on the crisis in Iraq — and after a couple of days of staring at lots of maps of the desert, it struck me that:

1. The Euphrates is both very long, and very straight for its length. Most rivers would have zig-zagged in such a way that you couldn't do a linear scroll.

2. Visually, the river against the desert is extremely striking, and the wide expanses of empty land are perfect for labeling.

3. Because that's where the water is, almost all settlement and activity in northern and western Iraq run along these river lines.

... so that's where the idea came from. It was a pretty lucky combination of geography and news circumstances. After that came the really quite long and difficult process of figuring out the current status of small towns and cities — much of which is uncertain and hard to find reliable sources on — and doing the writing and editing of the piece. Karen Yourish and Archie Tse did a real marathon of reporting to get that done. Towards the end, the Baghdad bureau kindly went through and confirmed the information that wound up in the final piece, and made additional suggestions for points of interest.

The Kurdish region isn't really addressed in this particular graphic, but you can see many of those towns in the northern part of the Tigris image, over on the right (not under ISIS control).

delinka• 12 years ago

"I found myself wanting to know more [...], so I spent another hour manually linking to Google Earth and Wikipedia to drill into more detail. / Along the way I found a lot of content on YouTube..."

Completely off-topic, but this is why network access should be considered crucial to human existence.

webmaven• 12 years ago

Technically not off-topic, just a digression.

austinz2• 12 years ago

I read this article the other day, and I really enjoyed both the presentation and the content. The historical and (especially) geographic context provided by the article is really helpful when it comes to trying to understand where ISIS came from, and how it could have taken over so much of Iraq so quickly.

jqm• 12 years ago

Wow, this is beautiful work. Kudos to the authors.

Now, to go examine the actual content.... Eh, never mind, it's too depressing. I think I'll just jealously admire the scroll down again.

codezero• 12 years ago

Content aside, I think it's really cool how the map area expands with the window and the mini-map's red rectangle accurately represents your view in the browser window. Very neat.

emeltzz• 12 years ago

Wow. This is one of the best graphical presentations I've ever seen.

lugg• 12 years ago

Impressive mobile support as always. Very well done, kudos nyt!

Hopka2• 12 years ago

It is not working at all on either Firefox 30 or Chromium 34 (both Ubuntu). All I see is two large maps and a bit of text in between.

The developer console has a few CORS errors, though:

XMLHttpRequest cannot load http://graphics8.nytimes.com/newsgraphics/2014/06/18/tigris-.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.nytimes.com' is therefore not allowed access.
XMLHttpRequest cannot load http://core2_euw1.fabrik.nytimes.com./info. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.nytimes.com' is therefore not allowed access.

I suppose accessing through nytimes.com would work, but it redirects to www.nytimes.com...

a3n• 12 years ago

I'm on FF 30 and LinuxMint (downstream from Ubuntu), it seems to be working fine. My FF is whatever is in the repositories.

I remember that NYT graphic/article on the avalanche in Washington a couple years ago, I had to view it in both FF and Chrome to see all the graphic effects.

I just looked at it again, everything seems to work in Chromium. In FF, some of the graphics don't play automatically as they do in Ch, and some of the videos don't play at all. Chromium seems to play everything fine.

http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunne...

GFischer• 12 years ago

Didn't work for me either. I'll try from another location.

jashkenas9• 12 years ago

It seems odd that browsers on Ubuntu would be getting CORS errors — while the same browsers for everyone else would not. CORS, being a policy, should apply consistently, no? Perhaps you've changed a setting somewhere?

Either way, I've made a note to look into setting Access-Control-Allow-Origin headers on all the static assets we publish out to Graphics8...

Hopka2• 12 years ago

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.

novaleaf• 12 years ago

Sorry, how is this a "Show HN"?

dang2• 12 years ago

It's something the submitter (along with others) made, and other people can play with it—in this case, because it's interactive. So I'd say it meets the definition at https://news.ycombinator.com/showhn.html.

We don't want to be too strict about this because creative work can take many forms. Mostly we just want to exclude vaporware.

Show HN: A Rogue State Along Two Rivers

Related Stories