5 ms·

The NYT's Visual Election Outcome Explorer - How we made the D3 decision tree

114 points by NelsonMinar 14y ago

rauljara 14y ago
In general I've been super impressed with NY times visualizations recently. I look at the 538 visualizations daily (http://fivethirtyeight.blogs.nytimes.com/ http://fivethirtyeight.blogs.nytimes.com/). Sometimes they're splashy and cool, but in general they're just tastefully designed in way that gives quick insight into the data that I wouldn't have gotten otherwise. And that's the really crucial part, I think: culling the data so that the relevant stuff is what jumps out at you.
- hammock 14y ago
  The NYT Graphics Desk keeps a tumblr where they occasionally talk about the process behind their creations. http://chartsnthings.tumblr.com/ http://chartsnthings.tumblr.com/
ilcavero 14y ago
this is simply awesome, not only cause of the great visualization of data but because the interactions to model your scenarios blew me away. Really need to learn this D3 stuff ASAP.
ckluis 14y ago
The NY Times should do a behind the visuals for every post with visuals. Excellent work recently.
paulgb 14y ago
> We use a git-backed preview server that allows us to share versioned previews of graphics (any commit, any fork) and get feedback. I'm jealous that this exists and I didn't know about it. Anyone aware of something like this that exists in the open-source/SaaS world?
- roryokane 14y ago
  GitHub supports that. Commits (on any branch) that change images display the images inline, and you can comment on those commits. Example commit: https://github.com/cameronmcefee/Image-Diff-View-Modes/commit/8e95f70c9c47168305970e91021072673d7cdad8 https://github.com/cameronmcefee/Image-Diff-View-Modes/commi...
- mbostock 14y ago
  It's mostly open-sourced, available here: https://github.com/mbostock/git-static https://github.com/mbostock/git-static
  - paulgb 14y ago
    Very cool. I love your work.
- kkwok 14y ago
  This may be completely wrong. But is mbostock's http://bl.ocks.org/ http://bl.ocks.org/ an example of this? Makes sense, since he's one of the creators of the nytimes graphics as well.
- mnutt 14y ago
  I actually ran into a very similar problem this weekend. I ended up using gitolite with post-commit hooks that checked out the repo to a directory served by nginx. It ends up taking up a lot more space than Mike's solution, but has fewer moving pieces, assuming you're already running nginx. Additionally you can use it to set up some fancy rules, like the "production" branch push to a special place, allowing users to create their own repos, and fine-grained access controls via gitolite.
deleted 14y ago
[deleted]
danso 14y ago
What I enjoy about the NYT interactives in particular is not just their technical sophistication (which is formidable given that the creators of Backbone.js and D3 are among their employees) but the sophisticated information design. There's rarely a graphic that is made to show off bells and whistles. The NYT is far and away he closest to embodying the Tufte spirit and thoughtfulness online, given that Tufte has said very little about best practices in interactives
- astral303 14y ago
  I agree entirely. You never see the cliparty slapshy chartjunk that is most of the infographics online. Any infographic from NY Times is designed to show only the data and nothing but the data. For oil prices, a bar chart, not a chart of barrels.
  - mnicole 14y ago
    Exactly. Sites like visual.ly are the 99designs of infographics. They're graphic design 101 projects with often misleading/misinterpreted data thrown on a document the size of the moon. They're hard to read and even harder to digest.
- viggity 14y ago
  if you'd like a tufte-esque view on interactive graphics, checkout the PhD dissertation from Ben Fry (the creator of the Processing language). I rather enjoyed reading it, and it isn't crazy dense, it was a nice easy read. http://benfry.com/phd/ http://benfry.com/phd/

114 points by NelsonMinar 14y ago

In general I've been super impressed with NY times visualizations recently. I look at the 538 visualizations daily (http://fivethirtyeight.blogs.nytimes.com/ http://fivethirtyeight.blogs.nytimes.com/). Sometimes they're splashy and cool, but in general they're just tastefully designed in way that gives quick insight into the data that I wouldn't have gotten otherwise. And that's the really crucial part, I think: culling the data so that the relevant stuff is what jumps out at you.

hammock 14y ago
The NYT Graphics Desk keeps a tumblr where they occasionally talk about the process behind their creations. http://chartsnthings.tumblr.com/ http://chartsnthings.tumblr.com/

ilcavero 14y ago

this is simply awesome, not only cause of the great visualization of data but because the interactions to model your scenarios blew me away. Really need to learn this D3 stuff ASAP.

ckluis 14y ago

The NY Times should do a behind the visuals for every post with visuals. Excellent work recently.

paulgb 14y ago

> We use a git-backed preview server that allows us to share versioned previews of graphics (any commit, any fork) and get feedback. I'm jealous that this exists and I didn't know about it. Anyone aware of something like this that exists in the open-source/SaaS world?

roryokane 14y ago
GitHub supports that. Commits (on any branch) that change images display the images inline, and you can comment on those commits. Example commit: https://github.com/cameronmcefee/Image-Diff-View-Modes/commit/8e95f70c9c47168305970e91021072673d7cdad8 https://github.com/cameronmcefee/Image-Diff-View-Modes/commi...
mbostock 14y ago
It's mostly open-sourced, available here: https://github.com/mbostock/git-static https://github.com/mbostock/git-static
- paulgb 14y ago
  Very cool. I love your work.
kkwok 14y ago
This may be completely wrong. But is mbostock's http://bl.ocks.org/ http://bl.ocks.org/ an example of this? Makes sense, since he's one of the creators of the nytimes graphics as well.
mnutt 14y ago
I actually ran into a very similar problem this weekend. I ended up using gitolite with post-commit hooks that checked out the repo to a directory served by nginx. It ends up taking up a lot more space than Mike's solution, but has fewer moving pieces, assuming you're already running nginx. Additionally you can use it to set up some fancy rules, like the "production" branch push to a special place, allowing users to create their own repos, and fine-grained access controls via gitolite.

deleted 14y ago

[deleted]

danso 14y ago

What I enjoy about the NYT interactives in particular is not just their technical sophistication (which is formidable given that the creators of Backbone.js and D3 are among their employees) but the sophisticated information design. There's rarely a graphic that is made to show off bells and whistles. The NYT is far and away he closest to embodying the Tufte spirit and thoughtfulness online, given that Tufte has said very little about best practices in interactives

astral303 14y ago
I agree entirely. You never see the cliparty slapshy chartjunk that is most of the infographics online. Any infographic from NY Times is designed to show only the data and nothing but the data. For oil prices, a bar chart, not a chart of barrels.
- mnicole 14y ago
  Exactly. Sites like visual.ly are the 99designs of infographics. They're graphic design 101 projects with often misleading/misinterpreted data thrown on a document the size of the moon. They're hard to read and even harder to digest.
viggity 14y ago
if you'd like a tufte-esque view on interactive graphics, checkout the PhD dissertation from Ben Fry (the creator of the Processing language). I rather enjoyed reading it, and it isn't crazy dense, it was a nice easy read. http://benfry.com/phd/ http://benfry.com/phd/