Examples of interactive journalism – Week 7
To see all posts in the “Examples” series, view the category “Examples.”
Not as flashy as some previous examples, this week’s example (A can that works more like a glass, from the Boston Globe) is something you will know how to do very, very soon. Also, I like the clean, open look of the design. The interaction is almost non-existent (buttons only), but the page itself interacts, as you can see from the code shown below.
Notice that the part of the code shown below starts at line 298 of the HTML document (View Page Source to see for yourself).
What I want you to notice is that each of the “chapters” of the graphic is already present in the HTML when the page loads. However, you see only ONE chapter at a time. This is a basic and easy jQuery trick you will learn in the first week after Spring Break — the buttons on the page (also pure HTML) cause these different images to hide and appear.
Your Reply
Leave a comment on this post to submit your example for this week.
- Post only ONE link.
- Make sure your link is correct and functional.
- Include the title or headline of the example you are linking to.
- Write one sentence about why we should appreciate it.
Read the details and rules on the Required Work page, under the subheading “Extra credit.”
Posted on February 18, 2013, in Examples and tagged information graphics, javascript, journalism, jquery, week7. Bookmark the permalink. 8 Comments.
http://www.telegraph.co.uk/earth/earthnews/9345086/The-worlds-fattest-countries-how-do-you-compare.html
“The world’s fattest countries: how do you compare?” (June 2012)
This is a neat graphic that shows how you stack up against the average weights of different countries; I’m glad I ended up below the U.S. average! Apparently Americans account for 1/3 of the world’s weight- woah!
Chris, I like how you can mouse over the bar graph on the right and see each country’s average weight that way. Indonesia’s is 115 lbs.! But then, many people there are very short.
http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html?smid=tw-share
“Among the Oscar Contenders, a Host of Connections” (The New York Times 2/20/2013)
This piece is a web map of Oscar nominated actors, producers, directors, and those with multiple roles. The work shows the connection between this year’s nominations and other awards they have been nominated for or won in the past. This graphic is really nice for those of us who want to use Internet Movie Database to find out those connections for ourselves!
http://www.guardian.co.uk/uk/interactive/2011/dec/07/london-riots-twitter
“How riot rumors spread on Twitter”
This piece allows users to select a rumor on a interactive table to see how unsubstantiated claims are spread on twitter before being confirmed or denied. After picking a rumor, it shows you how the rumor would spread.
Dana – that’s a very complex graphic. I enjoyed mousing around on it for a little while, but in the end it left me rather unsatisfied. It’s very pretty, though!
Jessica – The Guardian Twitter graphic is great! I read their behind-the-scenes piece, “How we built our Twitter riots interactive,” and felt impressed all over again:
http://www.guardian.co.uk/news/datablog/2011/dec/08/twitter-riots-interactive
https://www.smartasset.com/infographic/startup
“Startup Economics: Beta”
This infographic allows for start-up company co-founders to easily solve & manage some rather difficult financial calculations through a simple user interface. The infographic is meant to assist co-founders in managing their company stock and equity through different financial funding rounds. Although it appears to be a simple website, this interactive journalism piece has the ability to offer entrepreneurs the opportunity to run a variety of different funding scenarios, and analyze the data in terms of measuring their personal benefit (stock equity value).
Tyler – I don’t see anything that indicates this tool is journalism. If you can make a case to show why or how it is journalism, I will reconsider it. But otherwise, this example does not count.