News media are using multimedia and interactivity to track same-sex marriage and the stories of gay men and women across the U.S. One of the most common ways online news sites are the debate is using maps that visualize where same-sex marriage or civil unions are legal. CNN and NPR have created two such maps (pictured below) that readers can click or hover over to read more about the each state's position on the issue.

 

The L.A. Times also has a similar map and, in addition, has an adjacent timeline that plots landmark moments in the same-sex marriage and corresponds with the map.



The New Republic, like many other news sites, produced a slideshow that illustrates various points in the chronology of same-sex marriage.



CNN has invited couples of all sexualities to tell their own stories and submit video using iReport. The result is sort of a like niche YouTube that contains video dedicated to a specific topic.



GOOD Magazine took a unique approach to the debate by creating a flat graphic/flow chart that visualizes key arguments made for and against same-sex marriage.



Finally, KQED and The California Report have created a blog dedicated to the ongoing Prop 8 debate happening in California. The blog contains regular updates about what's happening inside the court and includes quotes from witnesses and outside observers.



Also on 10,000 Words:

• 8 Interactive online projects that educate and captivate
• Post-Inauguration Wrap Up: High-tech coverage of the tech president
• 10 Inspirational New York Times multimedia and interactive features

Labels: blogging, design, flash

One of the most popular trends in online journalism is taking publicly available data and translating it into visualizations or infographics that readers and viewers can quickly and easily understand. A large percentage of the visualizations you see on the web were built from scratch, which can take a considerable amount of time and effort. The following sites allow you to mash your data in record time.

Swivel

Swivel features more than 15,000 data sets for users to play with in various categories ranging from Economics to Health to Technology. From the data, users have created hundreds of thousands of graphs, charts and infographics, including the one below that visualizes the amount of rainfall in California since 1870. You can get started by copying and pasting your data or uploading an Excel spreadsheet or CSV file to the site. Once you've create your visualization, you can embed it anywhere on the web.

Socrata

Socrata is an online space for data lovers to browse datasets as well as create new visualizations to share with others. The data itself can be visualized in a number of ways including, charts, maps, graphs and tables. The site has hundreds of datasets to choose from which can be mashed and downloaded into a variety of file formats including CSV, PDF and XML.

Widgenie

Widgenie lets users upload data from a variety of sources such as Excel spreadsheets, CSV files or Google Spreadsheets and using a drag and drop interface to create custom charts and graphs. Once the data has been arranged and styled, it is presented as a widget that can be embedded in web sites and social networks. Widgenie also has a premium service that offers unlimited widgets and branding opportunities.

Verifiable

Like the previously mentioned sites, Verifiable allows users to upload, mash and visualize data. Verifiable just launched earlier this year and has fewer publicly available data sets, but it does offer greater flexibility on how the data is styled and presented. Graphic designers will appreciate the ability to change and tweak the presentation and add details like custom labels and shading. Verifiable is free to use if you keep your charts public, but also has a inexpensive pricing plan for those who want to keep their work private.

DataMasher

There are a lot of cool things about DataMasher: the available datasets, the community built around that data, the unique visualization tools, and the easy-to-use interface of the site. What is truly intriguing about the site is the way users take two different datasets and create visual hypotheses. For example, to visualize the Most Reproductive States (US), one user combined the number of US births witH population figures from the 2008 US Census. You can check out the results below:



At the very least, DataMasher and the other sites listed here are great resources for generating ideas on how to mix and remix various datasets.


Also on 10,000 Words:

• Data centers, APIs and what they mean to journalism
• 12 ways to find the best in data visualization
• Where to find the best online interactive maps
• News databases: Turning numbers into knowledge
• 5 Ways to take your map mashups to the next level

Labels: database, design

GoodMorning!

This stunning video visualizes Twitter users around the world who tweeted the phrase "good morning." Approximately 11,000 tweets in various languages were collected for the project and are color-coded by time of day. Find out more about how it was created here.

Information creation & circulation, after Twitter

It's no secret that Twitter has challenged mainstream news media when it comes to breaking news. Exactly how far behind do television and newspapers lag? About two hours and 8 hours, respectively, according to this chart.

twittervision

An oldie but goodie, Twittervision maps recent tweets on a Google map mashup. The result is both striking and hypnotic.

More Truth About Twitter

If the Twitter community were 100 people, 50 would be lazy and 20 would be dead, according to this visualization based on recent Twitter studies. Subsequent charts reveal that on average 40% of tweets are "inane" and Monday is the peak day for retweets.

Twitterfall

Twitter's public timeline never looked this good. Keep track of trending topics or your own search terms with this online tool that presents recent tweets as a never-ending cascade.

Just Landed

This video piece visualizes Twitter users who have just landed or arrived in locations around the world with streams that plot both their home location and the location where they arrived.

twistori

Twitter users can be an emotional bunch and nowhere else is that more clearly visualized than twistori, which sorts and streams tweets by various sentiments, including love, hate and believe.


Also on 10,000 Words:

• How to analyze your Twitter followers and friends
• Be inspired! 12 ways to find the best in data visualization
• 8 Ways of visualizing the news
• Databases and polls: When numbers are the news
• 10 Journalists you should follow on Twitter

Labels: database, design

Anyone who has ever searched through a large selection of fonts for a design project knows that many fonts and typefaces can have some pretty out there names. Here's your challenge... of the 15 names in the quiz below, which are actual names of fonts and which are band names. Good luck!




Also on 10,000 Words:

• How to select the right font every time
• What it feels like to make the front page of Digg
• A is for Audio: The ABCs of Multimedia

Labels: design

In a recent episode of Bravo TV's The Fashion Show, fashion designer Isaac Mizrahi instructed contestants on the importance of the mood board, a collection of images that will inspire a particular project. For Mizrahi it was various sketches, fabric samples, color swatches and photographs that indicated the direction of his upcoming collection.

For web and graphic designers, a mood board can play an equally important role in the design of an upcoming project. Sometimes inspiration comes naturally, but other times designers are just left to stare at the wall until an idea materializes. To help facilitate the idea process, every designer should keep a digital mood board. Instead of fabric swatches tacked to a wall, a digital mood board can be a computer folder filled with images saved from the web, scans from magazines, or photos taken by the designer. Whenever you are in search of inspiration, simply scroll through the collection images, pulling a few aside until you have an idea of what your project will look like.

For example, for the Flash project A is for Audio: The ABCs of Multimedia, I wanted an antique look but wasn't sure how to bring it to life. So I pulled aside the following images and invoked the spirit of Sesame Street and the Golden Books series.



And here is the result:



"A is for Audio: The ABCs of Multimedia". Click image to view video.


For a previous iteration of my personal website, I looked to my digital mood board for inspiration...



And here is the final result:




Inspiration does not always have to be a collection of images. For example, a Flash animation created for Entertainment Weekly on Kanye West was inspired by a flat infographic scanned a year earlier.

To start your own digital mood board, grab a camera and take photos of anything that interests you, rip out and scan pages from magazines, or use screengrab software to save your favorite web images. Start at sites like FFFFOUND! and Smashing Magazine which feature incredible design.

Another designer's work should never be copied in whole (that is plagiarism and a sign of a bad designer). Instead, look to your mood board for inspiration and remember originality trumps a copy any day.


Also on 10,000 Words:

• How to select the right font every time
• How to design for a computer other than your own
• Multimedia Picker: Choose the right medium for your message

Labels: design

Most online news sites are poorly designed messes where stories are packed into every crevice of the site with no consideration for the user. Those who just want to browse the latest headlines are often left to wade through a sea of indecipherable text. The following sites recognize that online readers want to browse headlines and they want to do it quickly.

USA Today: Newsdeck

USA Today has long been a champion of visual journalism. Newsdeck, launched last week, continues that tradition with a headline aggregator laid out in the paper's colorful but simple style. Headlines are broken up into separate boxes that, by selecting the arrow button, toggle between top stories and most popular stories.

New York Times: Article Skimmer

Article Skimmer, launched earlier this year, is a user-friendly interface for browsing the latest New York Times headlines. Browse different sections by selecting a category in the sidebar or using the up and down arrow keys on the keyboard.

Google News Timeline

While the Times and USA Today visualizations only show headlines from their respective papers, Google News Timeline displays news stories from a variety of news outlets, arranged chronologically on a timeline. Users can also enter a search term to see the news on a given subject as it has been covered over time.

DoodleBuzz

DoodleBuzz isn't going to be the site of choice for hardcore news readers, but it is a fun tool for visualizing news headlines in a unique way. Enter a search term and draw a few lines with your mouse and DoodleBuzz creates headlines based on your doodles. Doodle more and you'll find story excerpts as well as related topics.




UPDATE: Be sure to check out lanacion.com's visualization of its most popular stories. Each story is arranged in the tree map format also used in the popular Marumushi Newsmap (hat tip to the site's Conectados blog).




Also on 10,000 Words:

• 8 Ways of visualizing the news
• 7 Innovative ways of visualizing the news
• Be inspired! 12 ways to find the best in data visualization

Labels: design

With just 73x73 pixels to communicate your brand or personality, picking the right Twitter avatar can be a difficult process. A good avatar has to be memorable, well-designed and most of all stand out from the pack. Nevertheless, many Twitter avatars fall into several categories. Here are the most popular:

Logos

With so many news organizations and other companies jumping on the Twitter bandwagon, many familiar logos are being transformed into avatars, yet are still instantly recognizable. Most of these avatars are a no-brainer to create.

     
     

Professional headshots

Nothing says I'm a professional like a classy photo with perfect lighting and the perfect smile. These are great for people who represent a company or institution and usually scream "I mean business."

     
     

Cool headshots

The cool headshot is a carryover of the type of photo you'd see used as a default Facebook or MySpace picture. These avatars say "I might be professional, but I've got tons of personality."

     
     

Colorized headshots

Designers, entertainers and all-around creative people seem to favor the colorized photo, which is even cooler than the cool headshot. The tweeters with these avatars are eager to break away from the pack, stand up and be noticed.

     
     

Illustrated avatars

The illustrated avatar often signifies that the Tweeter has a larger-than-life personality that cannot be expressed in a regular photo.

     
     

Pop culture icons

One of the easiest ways to establish your personal brand of cool is to adopt the personality of a pop culture icon. These tweeps aren't necessarily associated with a brand and are free to co-opt the iconic imagery of someone or something else.

     
     

Mascots

Mascots are used by companies and online services as a figurehead for the brand. Therefore, it is natural that the mascot also serves as the avatar.

     
     


Of course, avatars are not limited to Twitter and ideally the same one should be used on multiple social networking sites. Media companies and established brands especially should use the same avatar across the web, on their own sites and as their favicon. Wherever your avatar is used, be sure it's a good one that works for you and stick to it. Just be sure it doesn't look like this:





Also on 10,000 Words:

• The top 7 mistakes new Twitter users make
• 10 Journalists you should follow on Twitter
• 25 Tools for getting more out of Twitter
• Beyond Twitterfeed: Innovative uses of Twitter in the newsroom
• How to analyze your Twitter followers and friends

Labels: design, social networking