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.

Advertisements

10 thoughts on “Examples of interactive journalism – Week 11

  1. http://www.nytimes.com/newsgraphics/2013/0214-fema-map/new-fema-flood-insurance-maps-for-new-jersey.html

    New FEMA Flood Insurance Maps for New Jersey

    This interactive webpage was done by the New York Times after hurricane Sandy touched land. The page displays a map of the coast of New Jersey and you are presented with three different interactive options to engage in. Building rules, new flood zones and Sandy flooding. By clicking the three different options, certain areas along the coast will highlight in different colors to tell you about the area and give valuable information.

  2. Kristen Morrell says:

    http://www.guardian.co.uk/world/interactive/2013/feb/22/affordable-care-act-medicaid-expansion-state-guide

    Medicaid expansion: a state-by-state guide

    This interactive webpage shows the amount of people who will benefit from Medicaid expansion as part of Barack Obama’s Affordable Care Act. It also shows how much the expansion will cost. The first page isn’t very interactive, but it groups states into three categories. When you click on a state, however, many statistics are shown. In addition, by hovering over a state on the U.S. map, the statistics change. I like how simple this interactive is. It shows a lot of information in a very consistent and organized way. Even when you change states, the statistics simply switch rather than moving around as a distraction. Regardless of where you hover on the page, comparative measures are shown.

  3. http://hosted.ap.org/specials/interactives/_science/moon_anniversary/
    “In retrospect: 40 years since the race to the moon” by the Associated Press

    This is a nice piece that explains the lunar space task in three parts: 1) A Giant Leap features a video about the task with information clips on the slide about the astronauts involved 2) Apollo Mission features an interactive rendition of the steps involved in the process of reaching space and the moon 3) Try and Try Again features a timeline viewers can manipulate themselves to better see the space race. My favorite part was the “Apollo Mission” because I could really visualize how the mission worked through a mock video rendition with short explanations every now and then. One thing I don’t like about the project is the titles given to the three parts. The titles don’t really describe what you’re seeing and when clicking between the three parts, the slugs are hard to decipher what the parts are.

  4. Jessica – That is a beautiful map. I love the different color palettes for each type of information. I also like how we can zoom on the map and then use the buttons at upper left to view each area.

  5. Kristen – I like that example. At its heart is a database of information about each state. When you click any state, all the stats graphics for that one state are shown on the same page. The specific data for that state is filled in from a database. The HTML says:

    [gia-state-name-hold] has a debt-to-GDP ratio of [gia-debt-score]. (The text in brackets is actuualy inside SPAN tags.)

    Also, this graphic uses the cool new “map font” called StateFace, developed by ProPublica:

    http://propublica.github.com/stateface/

    Check it out!!

  6. Oops! Let me give this one a try.
    http://www.nytimes.com/interactive/2013/03/22/us/politics/women-in-the-senate.html?ref=politics
    “Women in the Senate” by The New York Times

    I really like the subject of this interactive graphic. I like that we can toggle between the “All Senators” and “Women Senators” buttons, but the graph for All Senators is overwhelming. I almost wish there was a zoom in feature. I do like how the graph has been presented. It’s interesting and presents the information well. I like that when hovering over a woman’s point on the bar graph, a box appears with an image and important information about the senator. I do wish the box was on the right instead of the left because I wanted to be able to see the women around the highlighted individual.

  7. Dana – That’s a nice one. I agree that the “all Senators” view is too much to take in, and I also like the pop-up boxes that show each female Senator. Derek WIllis, who worked on that graphic, was one of our panelists at Journalism Interactive.

Comments are closed.