Posts tagged interactive

An Interactive History of Politics and the Olympics
via Council on Foreign Relations.

An Interactive History of Politics and the Olympics

via Council on Foreign Relations.

The United States by Mood

Time Magazine reports on a study published in the Journal of Personality and Social Psychology that took 13 years to survey 1.6 million people 48 US states (Alaska and Hawaii didn’t have enough respondents) about their personality:

As its name implies, the survey measures personality along five different spectra, with the Openness, Conscientiousness, Extroversion, Agreeableness and Neuroticism labels forming a handy acronym: OCEAN.

Each of those categories is defined by more-specific personality descriptors, such as curiosity and a preference for novelty (openness); self-discipline and dependability (conscientiousness); sociability and gregariousness (extroversion); compassion and cooperativeness (agreeableness); and anxiety and anger (neuroticism). The inventory gets at the precise mix of those qualities in any one person by asking subjects to respond on a 1-to-5 scale, from strongly disagree to strongly agree, with 44 statements including, “I see myself as someone who can be tense,” or “can be reserved,” or “has an active imagination,” or “is talkative.” There turned out to be a whole lot of Americans willing to sit still for that kind of in-depth prying, from a low of 3,166 in Wyoming (a huge sample group for a small state) to a high of 177,085 in California.

Researchers then broke the country down into three macro regions based on the results, which were categorized into “temperamental and uninhibited” (New England and the Mid-Atlantic), “friendly and conventional” (the South and Midwest) and “relaxed and creative” (the West Coast, Rocky Mountains and Sun Belt).

Read more about it here, see the map and take a ten question quiz that’ll tell you where you fit in the best. 

Explore a Pixelated World with 8-Bit City’s Maps

Zooming in and out of 8-Bit City's maps will make you feel like a kid again. Using data from OpenStreetMap, creator Brett Camper built interactive web maps of 18 cities around the world—in the style of a 1980s video game, which Camper says is the inspiration for the project:

I hope that these maps will evoke the same urge for exploration and abstract sense of scale that many of us remember experiencing on the Nintendo Entertainment System, the Commodore 64, or any other number of 8-bit microcomputers. Maps offer us visual architectures of the world, encouraging us to think about and interact with space in particularly constrained ways. 

Here’s more on the project, via Untapped Cities:

Don’t underestimate the detail of these maps based on their low resolution; they contain surprisingly accurate placements of city locations, attractions, streets, etc. You can even search for any address, and the map will refresh and zoom right to it.

Camper tells us he isn’t working on this project anymore, so don’t expect to see your city mapped if it isn’t already up. However, he is planning to make an indie video game that players to explore these 8-Bit City maps!

Images: 8-Bit City, screen grabs of Seattle and Amsterdam maps.

Snow Fall, Meet Firestorm
If you haven’t checked it out yet—and I hope you have—The Guardian’s Firestorm, a Snow Fall-esque interactive long-form multimedia piece came out last month and it’s completely stunning.
From Poynter’s story on the teamwork required to put it together:

“I think you have to capture people’s hearts,” Francesca Panetta, special projects editor of interactive storytelling projects, said in a phone interview. “As with all kinds of storytelling, you can’t lose sight of that need to connect and touch people, whether it’s writing or radio or a complicated interactive.”
Firestorm is remarkable for a number of reasons, including the stellar video images and the subtle way that looping video is used behind the written story. The integration between words and video is handled with such finesse that the one doesn’t distract from the other.
“We’re very happy with the subtlety,” Panetta said.
The chapter navigation uses clear images and concise icons and labels, ensuring it’s always clear where you are in the story.
A project like Firestorm or The New York Times’ Pulitzer-winning interactive,Snow Fall, demands considerable resources. Twenty-three people are credited for Firestorm, which was three months in the making — actually a speedy turnaround for a project of this scale.
Many newsrooms don’t have that level of resources, of course. But they can still learn from The Guardian’s process and the project’s experiments with layered storytelling — and figure out ways to do something similar on a smaller scale.
Keep reading for key takeaways from the project.

FJP: I’ve been hearing people favor this one to Snow Fall but perhaps that’s because the story itself (which is incredibly moving) lends itself to a slightly more poignant interactive than Snow Fall…but both are fantastic. —Jihii
Bonus: E-book version of the story, which you can buy here, along with other Guardian shorts.

Snow Fall, Meet Firestorm

If you haven’t checked it out yet—and I hope you have—The Guardian’s Firestorm, a Snow Fall-esque interactive long-form multimedia piece came out last month and it’s completely stunning.

From Poynter’s story on the teamwork required to put it together:

“I think you have to capture people’s hearts,” Francesca Panetta, special projects editor of interactive storytelling projects, said in a phone interview. “As with all kinds of storytelling, you can’t lose sight of that need to connect and touch people, whether it’s writing or radio or a complicated interactive.”

Firestorm is remarkable for a number of reasons, including the stellar video images and the subtle way that looping video is used behind the written story. The integration between words and video is handled with such finesse that the one doesn’t distract from the other.

“We’re very happy with the subtlety,” Panetta said.

The chapter navigation uses clear images and concise icons and labels, ensuring it’s always clear where you are in the story.

A project like Firestorm or The New York Times’ Pulitzer-winning interactive,Snow Fall, demands considerable resources. Twenty-three people are credited for Firestorm, which was three months in the making — actually a speedy turnaround for a project of this scale.

Many newsrooms don’t have that level of resources, of course. But they can still learn from The Guardian’s process and the project’s experiments with layered storytelling — and figure out ways to do something similar on a smaller scale.

Keep reading for key takeaways from the project.

FJP: I’ve been hearing people favor this one to Snow Fall but perhaps that’s because the story itself (which is incredibly moving) lends itself to a slightly more poignant interactive than Snow Fall…but both are fantastic. —Jihii

Bonus: E-book version of the story, which you can buy here, along with other Guardian shorts.

As we started to collect our ideas for the structure of the project, the multimedia group agreed that we didn’t want to create a bunch of different overlapping pieces and hang them all off the text. We wanted to make a single story out of all the assets, including the text. So the larger project wasn’t a typical design effort. It was an editing project that required us to weave things together so that text, video, photography and graphics could all be consumed in a way that was similar to reading—a different kind of reading.

Steve Duenes, NY Times Graphics Director in the Q&A: How We Made Snow Fall (via Source)

Last month, the NY Times created a beautifully compelling story on avalanches and skiing in Washington State. This morning, we get to read about exactly how they did it. Most fascinating is their discussion of how to pace the story so it would feel like a seamless reading experience:

Q. There’s a ton of audio and moving-image work in Snow Fall, and you used a lot of techniques from filmmaking, but within a very reading-centric experience. What kind of challenges did those elements present?

Catherine Spangler, Video Journalist: The challenges of crafting multimedia to compliment a text-based story were the same challenges faced in any storytelling endeavor. We focused on the pacing, narrative tension and story arc—all while ensuring that each element gave the user a different experience of the story. The moving images provided a much-needed pause at critical moments in the text, adding a subtle atmospheric quality. The team often asked whether a video or piece of audio was adding value to the project, and we edited elements out that felt duplicative. Having a tight edit that slowly built the tension of the narrative was the overall goal.

Graham Roberts, Graphics Editor: With the visuals, especially ones that would actually interrupt the reading, we wanted it to feel like a natural continuation. This required choosing appropriate color palettes, and the right kind of fluid movements. The reader would hopefully feel that they were reading into the graphic, and not see it as a distraction. Content wise, these elements needed to occur in passages that were challenging to express with words alone, like the layout of the terrain, and the shape, speed and duration of the avalanche itself. Or something that was very hard to follow without a visual aid, like the trajectory and timing of each skier’s path down the mountain.

Ranking Congress

The National Rifle Association rates members of congress on their gun-related voting record.

The New York Times gathers it all together in a handy interactive which shows not just how senators and representatives scored, but what campaign contributions they may have received from the NRA as well.

Images: How the National Rifle Association Rates Lawmakers, House (top), Senate (bottom), by the New York Times. Click to embiggen.

CNN takes on slavery using InDesign
In a really cool departure from what they normally do, CNN has just released an online article filled with slideshows, videos and sidebars focusing on slavery in the African country of Mauritania. Made in the interactive document-making program Adobe InDesign, the article looks more like a PDF than the usual CNN article we’re used to.
H/T: Nieman Lab

CNN takes on slavery using InDesign

In a really cool departure from what they normally do, CNN has just released an online article filled with slideshows, videos and sidebars focusing on slavery in the African country of Mauritania. Made in the interactive document-making program Adobe InDesign, the article looks more like a PDF than the usual CNN article we’re used to.

H/T: Nieman Lab

Visitors to New York’s Grand Central Station will see a large-scale interactive project by the Financial Times.

Called Graphic World, the project explores world business and global economy with 3D interactive projections throughout the terminal.

It was created in collaboration with David McCandless, a London-based data journalist and author.

H/T: Chart Porn.

Comparing the Fundraising Performance of the US Presidential Candidates

The NYTimes released a competitive dashboard of sorts, titled “The 2012 Money Race: Compare the Candidates” [nytimes.com]. Basically, the interactive graphic allows readers to contrast the various performance parameters in terms of fundraising from 2 presidential candidates next to each other. Another recent graphic [nytimes.com] lists the hundreds of organizations and people that fund the so-called Super PACs that are officially not controlled by those very candidates.

Via sunfoundation.

Comparing the Fundraising Performance of the US Presidential Candidates

The NYTimes released a competitive dashboard of sorts, titled “The 2012 Money Race: Compare the Candidates” [nytimes.com]. Basically, the interactive graphic allows readers to contrast the various performance parameters in terms of fundraising from 2 presidential candidates next to each other. Another recent graphic [nytimes.com] lists the hundreds of organizations and people that fund the so-called Super PACs that are officially not controlled by those very candidates.

Via sunfoundation.

Created by Hyperakt and Vizzuality, The Evolution of the Web is a fascinating interactive exploring Web technologies over the past 20 years.
Via Evolution of the Web:

The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn’t see is the interplay of web technologies and browsers that makes all this possible.
Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today’s web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they’re supported in all web browsers.
The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Check it.
Image: Detail from Evolution of the Web

Created by Hyperakt and Vizzuality, The Evolution of the Web is a fascinating interactive exploring Web technologies over the past 20 years.

Via Evolution of the Web:

The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn’t see is the interplay of web technologies and browsers that makes all this possible.

Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today’s web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they’re supported in all web browsers.

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Check it.

Image: Detail from Evolution of the Web

scribemedia:

Shazam For TV wants to use its technology to create interactive ads. 

Shazam for TV isn’t aiming to tell you that you’re watching The Simpsons the same way it tells you that you’re listening to The Beatles. Instead, the company has partnered with brands like Honda, Starbucks and Paramount Pictures to use its sound-identifying technology to create interactive ads.

read more at Mashable

Moving away from Flash: A look at JavaScript drawing libraries

washingtonpostinnovations:

When Apple announced early last year that it would not support Flash on the iPhone and iPad, a passionate conversation erupted in the world of web development: Was Flash dead? If not, how would it survive? When should it be used? News developers asked these questions as well, and, at least in our newsroom, the conversation inspired some thinking about how to approach interactive development. Over the past year and a half, there has been steady movement toward more interactivity based on JavaScript and fewer Flash-only experiences.

Budget proposals graphic

Last week we published a graphic that compared four federal budget proposals through a series of charts. We used the jQuery library Flot to draw simple, interactive line charts that showed how the debt and deficit would change under the different plans. Flot is very easy to use, flexible and customizable, and is one of many free-to-use JavaScript graphing libraries out there (Dracula, Highcharts and RGraph are a few others). We also built a customized chart with CSS and JavaScript at the bottom of the page to show how different categories of spending would be affected.

Read More

The New York Times creates an interactive that captures people’s emotional response to the killing of Osama Bin Laden.

Users chart where they lay on the graph and enter brief text about their thoughts.

The call it the Bin Laden Mood Matrix and charted over 10,500 responses.

This is another example of a really great example of an interactive piece done by the NY Times.  It follows a battalion and updates throughout the year

This is another example of a really great example of an interactive piece done by the NY Times.  It follows a battalion and updates throughout the year