Simple, Inspiring Storytelling

"Simple, Inspiring Storytelling" is a collection of infographics, designs, websites, interactives, you name it—that can inspire awesome storytelling. Click here to learn more about this blog. Got a question about this blog? Ask below!

[kpjour354]

Pharrell Williams: Gravitational Pull, Complex.com

http://www.complex.com/covers/pharrell-williams-interview-gravitational-pull-2013-cover-story/

Here's an example of parallax scrolling that makes reading a long profile piece more engaging. The futuristic theme of photos and headline are very hip right now, especially since Ender's Game hit theaters. There's a bit of animation between sections and it's easy to see how parallax scrolling can work like a flip book, each point along the scroll bar triggering a new page flip, a new behavior. Although I'm not a fan of white text on black (or even worse, these dark photos), the designer didn't have much choice and it's still easy to read, just might make your eyes hurt afterwards. This project reminds me of the Janelle Monae cover story and the Peugeot comic book examples of parallax scrolling. 

More pictures below, although you'll have to check it out for yourself to get the full experience!

[kpjour354]

Piktochart Practice

Behold: a Piktochart. I've worked with Infogr.am before and I was not happy with its usability. I was hoping to find a solution with Piktochart, and while it does offer a lot more freedom when it comes to organization and labeling, it still has some quirks that made creating this graphic much more tedious.

For example, the block system is a great way to organize content in the chart—if you know about it. Otherwise it will throw you off and complicate your design. The blocks behave like overlapping panels, so content will be hidden or disappear if you do not size your blocks accordingly. When I realized this, I made the first section larger so I could fill all of the "Who is not online?" content in one block. Designers cannot resize content to scale, only by using a free transform tool, making it more difficult to size graphics proportionally. Users have to click outside the infographic before they can move an image or text area within it. If you create a pie chart with several different slices, the legend will be larger than the the pie chart itself, discouraging the designer from even including labels.

Besides these quirks, I found Piktochart to be a much better design experience because I could decide—for the most part—how the data appeared on the page. 

[kpjour354]

Fusion Tables: Major Honey Exporters

Fusion Tables is a terrific tool for journalists who want to demonstrate the global impact of information. Let's say you have a data set about world hunger, population density, exports or imports. Grab that spreadsheet and find a fusion table, such as the World Map KML file, and combine them using Fusion Tables. This is how you make a map with polygons that fill the area of an entire country, state, or even city. I found a table with the top exporters of honey around the world and combined it with the World Map KML file to create this map. The darker the color of the country, the greater amount of honey it exports. To ensure that only the countries on my table were colored, and not every single country in the world, I merged the honey table with the World Map KML (not the other way around). This map is probably just the tip of the ice berg when it comes to what you can do with Fusion Tables, and I look forward to experimenting with them more! 

[kpjour354]

NFC East Power Rankings Line Graph

I've been watching some football today and I decided to look up the power rankings of each of the teams in the NFC East so far this season. I plotted them and the result was this line graph. I tried to change the direction of the Y-axis so the values would be listed in descending order (30 to 1 instead of 1 to 30) to better reflect how a low number is a better ranking, but I could not configure it properly. I'll be asking about how to do this (without a separate CSS stylesheet) in class tomorrow! Data courtesy of ESPN.com.

// <![CDATA[ google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Week', 'Dallas Cowboys', 'New York Giants', 'Philadelphia Eagles', 'Washington Redskins'], ['Preseason', 20, 12, 25, 11], ['Wk 1', 18, 12, 25, 10], ['Wk 2', 13, 16, 14, 19], ['Wk 3', 15, 20, 19, 24], ['Wk 4', 15, 29, 23, 27], ['Wk 5', 18, 30, 27, 25], ['Wk 6', 15, 31, 21, 27], ['Wk 7', 13, 31, 17, 28], ['Wk 8', 10, 29, 19, 23], ['Wk 9', 13, 29, 26, 24], ['Wk 10', 13, 29, 20, 22], ['Wk 11', 15, 25, 14, 23], ]); var options = { title: 'Power Rankings for NFC East in 2013 (so far)', }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, {vAxis:{direction:-1}}); } // ]]>

[kpjour354]

Farmers Market Map with Multiplottr

This summer I spent a couple days fact-checking information about the farmers markets in Prince George's County for my Patch.com internship. I used that data to create this map of markets operating during the week (Tuesday, Wednesday and Thursday) in the county. I enjoyed the ability to include links and images with each marker. Having to close the legend each time I wanted to save my work was a bit tedious and the map description would revert to the most recent text I had composed for a marker, erasing whatever I had written for the description before. Despite these problems, it was very easy to create and edit my map with Multiplottr. 

Map data:

Petersen, K. (August 16, 2013). Patch.com. In Map: Where to Find Farmers Markets in Prince George's County. Retrieved November 11, 2013, from http://laurel.patch.com/groups/business-news/p/map-where-to-find-farmers-markets-in-prince-georges-county.

Image credit given in description of each photo.

[kpjour354]

NSA Files: Decoded (The Guardian)

http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded?CMP=twt_gu#section/1

This is an immense project produced by the Guardian that emphasizes the scope of the NSA's data gathering and how it affects the lives of readers. I was immediately impressed with the site's clean design and the integration of videos. The red, white and blue color scheme symbolizes America and invites readers to question whether what they are learning about the American government matches American ideals and patriotism. The videos are set to automatically play and stop when a user scrolls to a certain coordinate on the page. The quotes are not just talking head clips—they put a face to the perspectives on the NSA and are more compelling than text alone. Users can choose whether the videos autoplay or not. Sometimes the video will not play if a user has previously watched it or the browser is not set at standard dimensions. Several interactive graphics, data visualizations and original documents are integrated in this six-part story, giving readers not only a wealth of information about the NSA's work but also empowering them to form their own opinions on the data gathering. 

[kpjour354]

The Jockey

Russell Baze is the winningest jockey in American history. Yet his name is familiar to only the most avid followers of horse racing.

This is a simple, beautiful multimedia project by the team at the New York Times. The designers direct the reading experience while also permitting the reader to skip multimedia elements. The text is presented on a blank, white background, but as the reader scrolls down the page, the lights dim and the stage literally fades to black, setting the scene for a video that automatically plays. The video includes narration and film recorded using GoPros and Pivothead cameras, which give the viewer a chance to experience the race from the jockey's perspective. The videos are narrated slideshows with video clips. Large, colorful photos and family photos are featured in each of the eight chapters of the story. Breaks in the story are noted with large dividers, which initially confused me because I thought content was missing from the space. The project also includes a separate page for comments and a share button that includes several social media sites (as well as a conveniently-placed ad for 12 Years A Slave). If for some reason a reader cannot listen to the videos (NYT gently encourages readers to make the audio part of the reading experience) he can skip them at any time. As a profile of the most successful jockey in American horse racing, this story design elegantly introduces readers to the man and respects him without the distraction of ads.

[kpjour354]

Where the effects of the shutdown are felt in the U.S.

http://www.washingtonpost.com/wp-apps/your-own-words/shutdown-map/?Post+generic=%3Ftid%3Dsm_twitter_washingtonpost

I'm really enjoying these crowd-sourced infographics from the Washington Post. This one encouraged people to share how much they are affected by the government shutdown. Their sentiments were plotted on a map of the U.S. The colors of each dot represented how seriously an individual is affected, with gray meaning "It doesn't affect me" to red meaning "It threatens my livelihood." Not surprisingly, most of the responses are based in Washington D.C., but they spread all across the country with varying degrees of severity. Selecting a color category allows a reader to hone in on one set of responses. A reader can also hover over points to read individual comments. Although it appears that only the continental United States is represented, zooming out will reveal responses from Hawaii and Alaska as well. I like the simplicity of these graphics and the emphasis on crowd-sourcing for data. Although this is by no means a scientific survey, it is a brilliant way to quickly capture snapshots of how the country is affected by national issues.

[kpjour354]

Everyone The U.S. Government Owes Money To, In One Graph

http://www.npr.org/blogs/money/2013/10/10/230944425/everyone-the-u-s-government-owes-money-to-in-one-graph?sc=tw&cc=share

This infographic uses shapes, shades and sizes to illustrate the U.S. debt. The three sections, Foreign, Federal Government and Domestic, are each proportionally unique, as are the divisions in each section. Different shades of the core colors, red, blue, and brown, help the viewer recognize which subdivisions belong to each section, and the size of the division reflects how much money is owed. This is important because exact amounts owed are only noted for $10.7 trillion of the $16.8 trillion in debt. Most people will forget the numbers, but may remember the proportions simply by taking the time to look at this graphic. To make it more interactive, the designer could have added a hover effect so readers could learn the exact amount owed for the smaller sections and what each section means without cramming too much text on the image. For example, the U.S. owes a little more than $550 billion to Caribbean Banking Centers, but I have no idea what those are and what exact amount is owed based on that graphic. A hover would have provided more details and encouraged me to stay on the page.

[kpjour354]

The Nacho Dorito

http://www.nytimes.com/interactive/2013/10/01/dining/nacho-graphic.html?smid=tw-share&_r=0

Although this graphic is nothing more than HTML carefully styled on top of a JPEG, the arrangement of text and the variety of images tantalize the eyes and the tastebuds. The simple cartoon art colored with the Dorito chip texture adds visual flavor to the story. If that's not enough to make you hungry, complete and crushed chips are scattered across the page. This article is about why the Nacho Cheese flavor of the chips has been so successful, and rather than composing the story with paragraphs or lists, the writer and page designer chose separate sections for each argument and used fewer than four words for each subdeck. It doesn't take much to tell someone why Doritos are so delicious, so the simple technique employed by the New York Times is just enough to convince anyone to drop what they're doing and head to the vending machine. I might just do that now... 

[kpjour354]

How does the government shutdown affect you?

http://www.washingtonpost.com/wp-apps/your-own-words/govt-shutdown/

This simple infographic by the Washington Post displays how readers are affected by the government shutdown using a venn diagram. The main colors, yellow and blue, are pleasing to the eye and the intersections produce shades of green, a calming color that inspires a completely opposite reaction than the shutdown does. Below this tulip-like diagram is a table of quotes from individuals who responded to the poll with icons indicating which circles on the diagram reflect their sentiments. Hovering over each section of the diagram explains the intersecting responses and a list of quotes from readers who provided those responses is generated when the section is clicked. A clean and clear diagram that is almost too simple considering the circumstances.

[kpjour354]

Wistia is a video hosting service for businesses

Again, the colors caught my attention, especially that awesome shade of blue. As you scroll down the page, different sections are indicated by background color changes or headers. The grid format for the clients and the swapping top banner is one of my favorite elements on the page. The design is not responsive but elegant on larger screens. Not a fan of the dropping video icons because the animation is sometimes slow.

[kpjour354]

Coloured Lines is a telephony company in Australia.

I was immediately attracted to the bold colors. They reminded me of paint color samples or swatches. I was disappointed with the design when I began clicking the navigation links. The scroll bar does not reset when you click a navigation link, so a user is directed to the bottom of a new page, rather than the top, if he had scrolled all the way down previously. The icons are only animated by hovering over the image. Some of the images make no sense unless animated. Other than those critiques, I was inspired by the use of color and the connection to the company's name.

[kpjour354]

Hundreds is an iPad & iPhone puzzle game about the space between you and the serene.

Here's a fun example of flat web design. The app's website has a fixed scrolling layout with animated circle icons. The tagline, "Let Hundreds unwind your mind" also captures the flow of the layout. Although the circles have different sizes, colors and images, they stick to a consistent color scheme and only a few are animated. As you scroll down the page, the page gets less cluttered and white space is used liberally. The result is a clean layout that mimics the experience of playing the game: at first intense, then relaxing.

[treedance]

Visualizing the Bible

Top: textual cross-references within the Bible via Chris Harrison:

The bar graph that runs along the bottom represents all of the chapters in the Bible. Books alternate in color between white and light gray. The length of each bar denotes the number of verses in the chapter. Each of the 63,779 cross references found in the Bible is depicted by a single arc - the color corresponds to the distance between the two chapters, creating a rainbow-like effect.

Bottom: applying sentiment analysis in the Bible, via OpenBible:

This visualization explores the ups and downs of the Bible narrative, using sentiment analysis to quantify when positive and negative events are happening…

Things start off well with creation, turn negative with Job and the patriarchs, improve again with Moses, dip with the period of the judges, recover with David, and have a mixed record (especially negative when Samaria is around) during the monarchy. The exilic period isn’t as negative as you might expect, nor the return period as positive. In the New Testament, things start off fine with Jesus, then quickly turn negative as opposition to his message grows. The story of the early church, especially in the epistles, is largely positive.

For more examples of biblical visualizations, visit The Guardian.

Images: Visiting the source links above gives you biggie versions. Alternatively, select to embiggen.

[kpjour354]

Also see Pitch interactive Old Testament, New Testament and Quran interactive.