Some great sites among 23rd Malofiej winners

Malofiej 23

See highlights from this international awards festival for news graphics.

View a list of all winners (PDF; the online winners, pages 3–4, do not appear to be linked, but THEY ARE LINKED. Roll over carefully and you’ll find you can click them.)

Inspiring!

Advertisements

Examples of interactive journalism – Week 14

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have two more chances to post, Weeks 15 and 16.)

A total of 18 animated and interactive charts make up this graphic from Bloomberg News: How Americans Die (published April 17). Sure, it’s not exactly a cheerful topic — but there’s good news in there. Our life expectancy has steadily improved since 1970.

How Americans Die chart 2 How Americans Die chart 1

What technologies were used? JavaScript! Specifically, a library called D3.js:

How Americans Die 3

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

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.

Examples of interactive journalism – Week 8

As always, add your own example for extra credit by providing a link in a reply to this post.

This week’s example, Empty Desks: Oregon’s Absenteeism Epidemic, comes from The Oregonian, which is not nearly as well known for data journalism as, say, The New York Times. The northwestern news organization has outdone itself on this excellent story about the consequences of kids skipping school, which is on the rise. The map below is just one example of the many appealing interactive charts and graphs in this package.

Oregonian absenteeism story

The graph below shows how the problem of absenteeism increases for high schools (red dots) in comparison with elementary schools (blue dots). Each dot provides more information when you roll over it.

Oregonian absenteeism 2

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

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.

Examples of interactive journalism – Week 4

As always, add your own example for extra credit by providing a link in a reply to this post.

I’m really excited about this week’s example of interactive journalism: In flight: See the planes in the sky right now, from The Guardian.

Using real-time data, a world map shows all the flights currently flying, everywhere on earth, RIGHT NOW. You can zoom in, and you can also rewind time to 24 hours ago. The package also includes a mini-documentary (see links at bottom edge) about the history of commercial air travel, which, as it happens, started in Tampa, Florida, in 1914. There are some nice data graphics in the fourth section, “Hitting the Limits?”

This review provides a little background about how the package was made.

Screen capture: In flight

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

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.

Examples of interactive journalism – Week 14

To see all posts in the “Examples” series, view the category “Examples.”

USA Today has a spiffy new website design (you should look!), and this graphics package about North Korea’s aggression is jam-packed with interesting stuff.

The map package at the top is really simple — just buttons that change the map images, no animation. You can make this! The timeline (second image below) appears father down on the page, below a short video — all the text for the timeline can be seen in the HTML, starting on line 21 (view source).

NORTH KOREA THREAT - map

HISTORY OF NORTH KOREA - timeline

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

Examples of interactive journalism – Week 11

To see all posts in the “Examples” series, view the category “Examples.”

This week’s example, from The New York Times, uses two different techniques with JavaScript/jQuery — one simple, one advanced.

The first graphic on the page uses jQuery techniques you have already learned to animate the transitions between 10 different images. Below the screenshot, you can see the code that begins on line 1422 of the source — that’s where the JPGs appear in the HTML. Notice how each image has an ID and a class. Each image also has its own z-index embedded in the HTML (z-index is a CSS property that lets you control how images layer on top of one another).

NYT schools graphic 1

NYT schools graphic 2

The second graphic on the same page was created with D3.js — “a JavaScript library for manipulating documents based on data.” I’ve shown a little bit of the code, below the screen capture (the code shown here starts at line 1590 in the source). So the map (unlike the school floor plans above) is not a static image file but is actually generated by code. Like jQuery, D3 is a JavaScript library — but it has a different purpose. D3 creates images from pure data.

If you right-click on the school building graphic, you can view or save the image. But if you right-click on the map graphic, you can’t — because there is no image file.

The map has its own CSS, which starts at line 662 in the source.

NYT schools graphic 2

NYT schools graphic 4

To learn more about D3 and see examples, see the D3 home page.

Examples of interactive journalism – Week 6

To see all posts in the “Examples” series, view the category “Examples.”

This week’s example is much more interesting to look at than its title would imply. Exit polls 2012: How the vote has shifted shows a chart for each U.S. state that illustrates whether demographic groups are sliding toward the “blue” side or the “red.” (Blocks include Education and Income, among others.) At the top you can scroll left or right through all 50 states. Roll over the red and blue arrows to see details for each block. (This is all JavaScript and CSS.)

Exit polls 2012: How the vote has shifted (Florida)

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