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.

Boston Globe graphic

Notice that the part of the code shown below starts at line 298 of the HTML document (View Page Source to see for yourself).

HTML from the Boston Globe

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.”


8 thoughts on “Examples of interactive journalism – Week 7

  1. 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.

  2. 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!

  3. 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!

  4. 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).

  5. 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.

Comments are closed.