4 ms·

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; }
  - cliveowen 12y ago
    And there's still people who think there's no place for Math in programming.
    - panarky 12y ago
      Funny how math and code make journalism so much better.
    - koberstein 12y ago
      Blasphemy!
    - seanmcdirmid 12y ago
      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?
      - xxxmadraxxx 12y ago
        Maths... with a feckin' S on the end!
      - Natsu 12y ago
        Actually there's a deep equivalence theorem between mathematical statements and programs. Here are people doing ZFC as a program - http://en.metamath.org/ http://en.metamath.org/
        seanmcdirmid 12y ago
        Most of programming involves figuring out what to do, not doing it.
        daurnimator 12y ago
        The same is said of mathematics.
pcl 12y 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 https://news.ycombinator.com/item?id=7986383
- jashkenas 12y 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...)
  - peqnp 12y ago
    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. A site partly created by Julian Assange with lots more great information: http://www.nytexaminer.com/ http://www.nytexaminer.com/
JunkDNA 12y ago
This is just awesome. Even on my iphone it is a compelling experience.
MichaelAO 12y 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?

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

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; }
- cliveowen 12y ago
  And there's still people who think there's no place for Math in programming.
  - panarky 12y ago
    Funny how math and code make journalism so much better.
  - koberstein 12y ago
    Blasphemy!
  - seanmcdirmid 12y ago
    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?
    - xxxmadraxxx 12y ago
      Maths... with a feckin' S on the end!
    - Natsu 12y ago
      Actually there's a deep equivalence theorem between mathematical statements and programs. Here are people doing ZFC as a program - http://en.metamath.org/ http://en.metamath.org/
      - seanmcdirmid 12y ago
        Most of programming involves figuring out what to do, not doing it.
        daurnimator 12y ago
        The same is said of mathematics.

pcl 12y 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 https://news.ycombinator.com/item?id=7986383

jashkenas 12y 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...)
- peqnp 12y ago
  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. A site partly created by Julian Assange with lots more great information: http://www.nytexaminer.com/ http://www.nytexaminer.com/

JunkDNA 12y ago

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

MichaelAO 12y 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?