5 ms·

Show HN: A Rogue State Along Two Rivers

212 points by jashkenas 12y ago

fredsters_s 12y ago
Is this a legit Show HN? It looks more like an article from the New York times to me.
- austinz 12y 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.
- deleted 12y ago
  [deleted]
- jewel 12y 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 12y ago
    He created Coffeescript, Backbone.js, and Underscore.js. Now works at NYT.
- jashkenas 12y ago
  It's legit. The New York Times is people too ;)
- dang 12y 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 https://news.ycombinator.com/showhn.html
- yitchelle 12y 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.
jashkenas 12y ago
Happy to answer questions about this, if folks have any...
- pokpokpok 12y ago
  How many people do you expect to read this article? greater than 1 million?
- akilism 12y 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?
  - jashkenas 12y 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/middleeast/the-iraq-isis-conflict-in-maps-photos-and-video.html 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 12y ago
  No questions, just wanted to say that this is magnificent work. The "X miles to Baghdad" is an especially nice touch.
  - jashkenas 12y 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; }
panarky 12y 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 http://www.edwardtufte.com/tufte/posters
- jashkenas 12y 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).
austinz 12y 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 12y 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 12y 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 12y ago
Wow. This is one of the best graphical presentations I've ever seen.
lugg 12y ago
Impressive mobile support as always. Very well done, kudos nyt!
Hopka 12y 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-and-euphrates/d4a56d136bb9d40ec16f882df983fe464c4cf69c/syria_and_iraq.json 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' http://www.nytimes.com' is therefore not allowed access. > XMLHttpRequest cannot load http://core2_euw1.fabrik.nytimes.com./info http://core2_euw1.fabrik.nytimes.com./info. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.nytimes.com' 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 12y 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=tunnel-creek http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunne...
- GFischer 12y ago
  Didn't work for me either. I'll try from another location.
- jashkenas 12y 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...
novaleaf 12y ago
Sorry, how is this a "Show HN"?
- dang 12y 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 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.

212 points by jashkenas 12y ago

fredsters_s 12y ago

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

austinz 12y 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.
deleted 12y ago
[deleted]
jewel 12y 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 12y ago
  He created Coffeescript, Backbone.js, and Underscore.js. Now works at NYT.
jashkenas 12y ago
It's legit. The New York Times is people too ;)
dang 12y 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 https://news.ycombinator.com/showhn.html
yitchelle 12y 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.

jashkenas 12y ago

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

pokpokpok 12y ago
How many people do you expect to read this article? greater than 1 million?
akilism 12y 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?
- jashkenas 12y 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/middleeast/the-iraq-isis-conflict-in-maps-photos-and-video.html 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 12y ago
No questions, just wanted to say that this is magnificent work. The "X miles to Baghdad" is an especially nice touch.
- jashkenas 12y 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; }

panarky 12y 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 http://www.edwardtufte.com/tufte/posters

jashkenas 12y 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).

austinz 12y 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 12y 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 12y 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 12y ago

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

lugg 12y ago

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

Hopka 12y 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-and-euphrates/d4a56d136bb9d40ec16f882df983fe464c4cf69c/syria_and_iraq.json 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' http://www.nytimes.com' is therefore not allowed access. > XMLHttpRequest cannot load http://core2_euw1.fabrik.nytimes.com./info http://core2_euw1.fabrik.nytimes.com./info. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.nytimes.com' 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 12y 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=tunnel-creek http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunne...
GFischer 12y ago
Didn't work for me either. I'll try from another location.
jashkenas 12y 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...

novaleaf 12y ago

Sorry, how is this a "Show HN"?

dang 12y 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 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.