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.
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).
"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.
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.
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...
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.
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?
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.
You know, I'm so conflicted about you. On the one hand, I greatly admire much of the open source code you've released, while on the other, it irks me considerably, the way you glorify working at such a despicable imperialist propaganda machine; a veritable house of lies.
... 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;
}
Anybody who says that can't be taken seriously. You need math anywhere there is meaningful manipulation of symbols/data/entity. That statement itself will end up including nearly ever profession on earth.
The problem with programming interviews is they test math tricks, arcane knowledge, trivia and puzzles.
Far more important than mathematical knowledge, is mathematical capability.
Math is a tool used in programming, programming isn't defined by math though (there are plenty of non-math activities that dominate the process). What is so hard about that?
Actually there's a deep equivalence theorem between mathematical statements and programs. Here are people doing ZFC as a program - http://en.metamath.org/
Yes, but that creative process isn't really doing math either (as defined by performing mathematical reasoning). The best we can say is that creative processes are involved in all disciplines.
Programming can involve math, math can involve programming, but neither is defined by the other.
This maybe a weird question, but where do most of the normal and landsat photos come from? If it all exclusive to NY or you use a freelance/marketplace service? I ask since I have a project ongoing with a similar photo requirements and have difficulty acquiring the images. (I have no problem paying, I just don't have the experience to know where to get them)
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?
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.
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.
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.
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.
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.
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.
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.
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