Infographics+Examples

toc

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

[|ACS Technologies]


This infographic is created to engage users in a fun web experience while providing information about the company. A series of pain/gain scenarios are set within an interactive community landscape to communicate the message. Interesting visuals attracts users to explore the different scenarios. Solutions are usually given after the problem has been addressed, and the style is consistent throughout. At the bottom of the infographic, there is a categorized menu, allowing users to easily look for specific types of information that they would like to get.

Alchemy of Fruit Juices
http://infosthetics.com/archives/2008/03/alchemy_of_fruit_juices.html

This infographic allows the viewer to choose different types of juice to create and test out, based on specific fruits, the taste of the juice or the feeling (ie. creamy). The circular form of the infograph is appropriate to the information because it gives the shape of a mixing bowl, or blender etc. The viewer is able to interact by not only choosing their preferences, but is also able to give a detailed message at the end of the outcome of the product (whether they found it to be tasty or not).

The overall appearance of the infograph is clean, minimalist and well organized. Around the perimeter of the circle are different characteristics of the juice, which are given a hierarchy of importance, noticeable by the type size of each item.

Amazon Product Ratings
http://www.savvygraph.com/ This website infographic maps the data gathered from Amazon.com product user ratings. It shows the number of users (the X-axis) and their ratings (the Y-axis) for multiple products (the dots). For example, if I were looking for books on typography, I would type 'typography,' select the 'books' category and the graph would show the Amazon products on this map; it would clearly show what is the highest ranking product to the most number of people. Structurally, a scatter plot is a basic way of showing information, but this is an effective and efficient way to show the data. You can visually see the greatest product as a whole, and also allows you to analyze each dot/product at a closer level.

Visually, the aesthetics needs work. It is characterized by radial gradients, default line strokes, and basic RGB color scheme. It looks very amateur Microsoft-template-y. It also needs some hierarchy, as the legend is disconnected, the collapsible menu and search seem very separate.

Interactively, the infographic borrows the same search components as Amazon.com (keyword, number of searches and category). By manipulating the keyword, the user can chart what they are looking for. Also, roll-overs are used to show products for each ‘point although they are sometimes long to load. Although the concept of this website is very good, I found it was confusing to use at first, and wasn’t as intuitive as it could have been designed.

http://amaztype.tha.jp/zeitgeist.html ** A visualization of the most popular word searches on Amazon in the past 7 days. The interface is simple and clear, sticking to type on a page instead of wild graphics. However, the interactive part of this does not come from this visualization, it comes from the search engine that this list is part of which allows the user to search through Amazon's catelogue and displays the results with a neat typographic style.
 * amaztype zeigeist

Bembo's Zoo
http://www.bemboszoo.com/



Bembo's Zoo is an interactive information graphic that engages the user by creating a online zoo environment with sound and typographic imagery. When accessed, the user is presented with the alphabet, which when clicked, the corresponding animal is portrayed by the animation of the type. However, this infographic is limited in the number of animals that it can portray. It would be better if each letter corresponds to a number of animals that begin with the letter instead of one. Additional colour may prove to enhance the site.

**Breathing Earth**
http://www.breathingearth.net/



breathingearth.net is an online presentation that displays the carbon dioxide emission rates, birth rates, and death rates of every country around the globe in the form of an interactive world map. It displays this information visually, and in real-time. Just hover over a country to see their rate of emission, as well as population info. As well, a country glows red every time it emits 1000 tons of CO2. The presentation was built in Flash, using graphics made in Photoshop.

The site is limited in its interactivity (the user can roll over the countries in order to view the provided statistics ,while the remaining graphics act as a timed graphic display), but as a concept Flash piece, it's both visually exciting and conceptually intriguing. One gets a new insight into the problems the world is facing when it comes to carbon dioxide poisoning the atmosphere.

The only downside is that the numbers are based on information taken from a Wikipedia article, the most up-to-date the designer could obtain, putting the accuracy of the statistics into question.

British History
View [|here] Type: Chronological Interactions: mouse click, dragging, drop down menus, popup Easy to navigate, this infographic gives you instructions on the introductory window. You can navigate the time line of British History by dragging the bar at the bottom, or you can drag the larger time line back and forth. You can also zoom in to detailed information about certain historical events. You can click on certain events, and a window will expand giving you more information when you are zoomed in.

This graphic is simple, and easy to navigate, also making use of color to separate different pieces of information (time periods) in an orderly fashion. You can click and drag the time line, but you cannot use the track pad or scroll on a mouse. Where there are quite a few events at one time, it is difficult to narrow in on a specific one because the dots marking the events are fairly close and when you roll over one, a bunch of information bubbles pop up. However, the graphic is neatly organized, effectively relays information, and is easy to navigate.

http://blog.immediatefuture.co.uk/category/infographics/ Type: Chronological Interactions: mouse click, zoom The first is a visual timeline allowing the viewer to ‘explore all of British history, from the Neolithic to the present day’. You can zoom in and out of different periods in history, following pre-set themes or jump around to learn about specific points in time.

Casualties of War – NY Times
http://www.nytimes.com/ref/us/20061228_3000FACES_TAB2.html

This website infographic maps the data from the U.S. solider death in the Iraqi war. By selecting time periods and scrolling/dragging along the timeline, the user can view the age, race, military rank, and location of the deaths during a set time period.

Structurally, the website does a good job in chunking the diffused data well; the age, race, etc., are kept in separate graphs, making the user clear what they looking at. The total deaths graph at the bottom also serves as an overview.

Visually, the aesthetics are kept simple and clear, which is very effective. A neutral color scheme is used, which I found useful as it allows the structure of the bars to speak.

Interactively, I found the infographic very simple to use. The user can only control the time-frame they are analyzing and even that, they can only choose between set time frames. I found this to be slightly disappointing, as there are so many variables that are isolated (age, rank, location) but the user can only manipulate one (the time). Overall, I found this infographic to be very clear and effective at communicating; however, I think it sets up the experience to appear to be very interactive, when it only allows for a simple, limited interaction (scrolling of one variable).

=**Children's Math / Reading Statistics in US**=

__//How Do Children in Your State Test?//__ http://www.time.com/time/2007/nochild/

This is a form of interactive information graphics in which one is able to view the skill levels of both reading and math within the the United States. It is easy to navigate, one you roll your mouse over a state, the name of the state appears along with the scores, comparing the scores from both national assessments and state assessments. The data provided is part of the "No Child Left Behind" program within the US that determines the level of scoring within the states. The information is clearly provide in a box that appears once you scrolls over the number. It is very straight forward and easy to navigate through providing all data that is necessary.

Connecting the Dots:
http://www.pbs.org/wgbh/pages/frontline/shows/knew/etc/connect.html




 * Type:** Chronological
 * Technical (Interaction):** mouse click, rollovers

This is an interactive map that points out what United States intelligence new at specific points in time starting with the World Trade Centre attack in 1993. As the information is explored pieces of information come to light that shows some linkages between the September 11 attack and conspiracies and plans 8 years previously leading up to that point.

The information graphic layout is very simple. It starts off at first with two bars of information going across the layout and divided into columns. Each column represents a significant point in time during the unfolding of events by U.S. Intelligence. The information is presented in a chronological order going from the discoveries of the mastermind of the attack to Post- Sept. 11 Revelations.

As it begins it shows the main mastermind of the attack and the links to those events he was involved in. As you mouseover each link, text appears in a separate window that explains how the corresponding information are linked. As the viewer continues to the next section or column, links from events viewed from the first section still remain on screen but become muted in colour. The current information is in full colour. The pattern continues, when link is rolled over information (that can include images as well) appears in a separate window beside it.

As the viewer continues along the sections the network of correspondences and correlations between terrorist attacks, terrorists and evidence becomes clearer. New information links back to older information and visually represents the integration and network of conspiracy.

Overall I think this information graphic was successful as it was simple, straight forward and easy to follow.

Map of Creativity
By The Next Generation Foundation http://www.ngf.org.uk/map/map.html

The Map of Creativity is an interactive information graphic that collects current project listings around the globe which are submitted by users. Projects can be navigated through age, theme, location etc. Projects extend from music groups to University associations.

The site is very simple and clean, but could use refinement in areas where text is jumbled together. The amount of information is overwhelming in the given space, but none the less it is interesting to see the flow and active elements of this interactive graphic.

Added by Antoinette T.

Customize Your Toyota
http://www.toyota.ca/cgi-bin/WebObjects/WWW.woa/19/wo/Home.Vehicles.Interactive-9e9HmtSMomtViqDH8HuUl0/19.13?fmg%2ficentre%2fyaris%2findex%2ehtml

This Toyota Canada website allows the user to customize the car by adding or removing the parts he wants. This website is slightly a bit different from other interactive infographic because the infographics in this website are mostly done visually but it does shows imformations of different vehicle parts. The visual 3d graphics are nicely done overall and clearly shows the vehicle part the user wants to know more about.

Data Cloud:
http://www.artificialtourism.com/dataCloud/dataCloud.php Data Cloud is a data visualisation system that displays the live weather conditions of major cities across the globe simultaneously. The climate information is gathered from airports all over the world and updated several times a day.

The weather conditions are mapped onto each city's name: font size relates to visibility, colour to temperature, and transparency to humidity. The city names move with the speed and direction of their wind readings while their atmospheric ressure is applied as friction to the movement.

Each time DataCloud launches it loads an image from a different location worldwide. The photographs have been submitted by users around the world.

It’s engaging, well-organized, functional and easy to figure out and explore.

Digg Labs
http://labs.digg.com/

The labs provide a broader view of information that is submitted to he internet. Users can choose to "digg" something, which makes it move up in ratings, or choose to "bury it". There are five ways to view information submitted to Digg Labs, the sections are: Pic, Arc, BigSpy, Stack and Swarm.

Facebook Friend Chart
http://thomas-fletcher.com/facebook/friendwheel/showwheel.php?userid=48911604&amp;name=Marina%20Luong&amp;pass=a876989f2f



This interesting Facebook application allows you to see which friends you share with other friends. Facebook already completed the hardest part of gathering the links to all your friends while the application utilizes it to create a visual image your social network. The more friends that you have, the more lines and colour connections will appear on the graph. Also, the more friends you have, the harder the graph becomes to read. In my opinion, the graph is not so much for the purpose of readability, but to see which part of the circle is more filled in. In the example shown, the bottom left section of the circle is filled with many different intertwining lines, while the top hemisphere is unfilled. Overall this application is very interesting and can be very effective when you would like to see just which of your friends know who. In terms of actually being able to read the names is a different story. This point might hinder the effectiveness of the graph.

Flickrvision
[|http://www.flickrvision.com]

[|jasonflickrvision.jpg]

Flickrvision, is a dynamic systems, that documents the constant updating of users on the flickr network developed by David Troy. A map of the world is presented to represent the many users flickr has internationally. The page allows the user to highlight or zoom into a specific part of the world and see the images people are posting. It is hard to navigate through, because the page will constantly update and show new images. There is also an alternate view, of the map on a globe, as seen in the picture below.

[|jasonflickrision2.jpg]

A little easier to navigate, the picture shows the many users who are currently using flickr at the moment. Like the first page, images are constantly being shown. The interesting thing about this infographic is that there are pictures from all around the world being broadcasted. The information is spatial and quantitative. Spatial in that, the users are seperated geographically. There is no real organization of content, random pictures are constantly popping up, throwing off the navigation. It is quantitative/spatial because in theory the user could pick any place in the world and view the users images from that area. But with constant disruptions on the page, navigating is very difficult. However, I find that the dynamic change of content is interesting but should be organized in a better way.

**__//Faces of the Dead//__**
http://www.nytimes.com/ref/us/20061228_3000FACES_TAB1.html In this example, there is a patchwork that makes up a fallen soldiers face. As you hover over any of the small squares, a name of a soldier and their date of death appears in a box. It is arranged by the most recent deaths that have taken place in the war. If you click on the specified square, it then changes into the face of the soldier. From there, a box on the left shows the date of death, hometown, age, and the branch of the army they were associated with. The user is also able to fill in either the last name, hometown, or state of a solider, to discover their time of death. I thought this type of interaction was informative, aesthetically pleasing, and easy to understand/use. The user simply has to move their mouse around, and they are instantly supplied with the information. If they want to learn more, they have the choice of filling in their own information and is then provided with the details requested.

=
This interactive program is very similar to the concept I have in mind. Representing global data in which information about the world can be seen as a whole or by country. There are a wide list of options that are explored and the interaction of the visuals makes it more appealing to watch. A very well done program which contains an immense amount of information that can be explored in different ways.=====

Genomic Cartography
http://acg.media.mit.edu/people/fry/genomevalence/

Ben Fry's in-depth visualization studies of the human genome - a lot of cool stuff on his website. My explanation can't do his website justice.

Geography + Information
http://www.geoandinfo.com/



This infographic is actually a system that allows the user to customize postcards which can be distributed later on to other people, as a way of sharing the information of our geographies to other people, including friends, family, and peers. It is designed so that people can keep up with their friends once they move, or even to just simply inform. The cards are digital, and can be drawn on, written on, and scribbled on. Once they have been, they eventually become pieces of geographical detail that can be viewed by others.

Geography + Information basically provides four different postcards that leave fields open such as city, country, longitude, latitude, etc. for the user to fill out. You can checkmark or circle the traits that your particular geographical area has. Each card is different since they will either focus on Climate, Land, Water &amp; Animals, or Industry &amp; Resources. The decision is up to the user.

Visually, this infographic is designed with very rich colours, which creates a pleasant look that can appeal to a wide age range. (They specify that they aim for adults and children above 8 years of age.) The infographic also imitates the look of a post-card, and successfully provides clear instructions for the user to operate it. However, the user must pay in order to have a set of four cards with the detailed instructions. It is very user-friendly though, and never tiring to look at. It's also very fun to fill out, since the virtual ability to scribble on these cards imitates the essence of manually filling out a form in reality.

**Goal.com News Menu**
http://goal.com/en/ This is a soccer website that provides users with the latest news on soccer around the world. This infographic is used as a preview menu for the top news stories for the day. Each news story loads a picture and a blurb. On the right is a picture menu of each story and the user can click on a photo to go to a specific story. If left alone the stories will circulate and the user can press pause if something catches their fancy. By clicking on the large picture the user can get to the full article.

This is an attractive way to display current news stories and encourage readers to gather more information through clicking. Having all of the pictures arranged on the right is convenient for the user to jump from story to story rather than having to wait for the story to cycle around again, as is the case with many infographics of the same nature.

Google Earth
http://earth.google.com/



Utilizing satellite imagery, Google Earth is able to display the geographical information of the world with maps, terrain, and 3D buildings. The users basically input their addresses before they are taken to a zoom-in view of their homes. Google Earth can also be used to find restaurants, hotels, parks, and schools, and can capture very stunning detail of people's terrains and neighborhood.

Google Earth also presents several different features. You can go across the world and view it in a 3D manner and you can also add a GPS feature to enhance your interactive experience after paying a small fee. Google Earth also allows the users to take a deep look into the sky as well, so people can examine the moon, stars, and other astronomical elements.

The design of Google Earth is very complex, but it is very simple to use. I found it exceptionally user-friendly and easy to navigate. (You basically just plug in the details of the address you're looking for before being able to access tons of tools that you can use on that address. Tools include finding local information, virtually touring the world, taken on a sample ride to your destination, and sharing information with your friends by marking down photos, notes, restaurant reviews, and so on.) You can search up many different things, and view everything in 3-dimensionally. The only negative criticism I have for this particular infographic is that imagery is sometimes pixelated. Yet even so, I think that can't really be helped because of what today's satellite imagery is capable of. The geographical details are still very, very stunning though.

Gruntledness
View [|Gruntledness] This is an interactive graphical display of the amount of people who are disgruntled with their jobs in America. One can rate their level of disgruntledness with their specific profession. The graphic is similar to that of a meteorological chart so it is easy to understand how it works, changes using various tones of cool and warm colours to show the contrast in the level of disgruntledness. Aesthetically it lends itself to the context of the infographic, it is easily recognizable and understandable.

In terms of interaction it is user friendly. There are rollovers of the different states that glow, and show the state name. When you click on the states it is subdivided into different cities for each state indicated by pop up tags. The animation of the information makes it easy to understand and navigate. Overall I find this infographic quite effective. If it were possible to make the colour gauge interactive it would be interesting to separate the colour on the map to see precisely by itself the sections of disgruntledness.

History of Adobe
http://www.adobe.com/aboutadobe/history/timeline/index.html This is an interactive timeline on the history of Adobe for the last 25 years. Its separated into four categories which are Company, People, Products and Industry. These sections are colour-coded so the viewer and easily differentiate them. Within these categories are circles in which viewers can click on. When you rollover on, it gives one a little info about the event and year. When you click on it, there is an image or information about that specific event. At the bottom, there is the options of seeing the circles by year. When you click on a year, the circles that do not belong in that year, shades out. This info graphic is simple but gives many options for viewing the information. Its effective and easy to understand.
 * Type:** Chronological
 * Interactions**: Rollovers, Mouseclick, menus

History of Religion
http://www.mapsofwar.com/ind/history-of-religion.html

This infographic is a timeline-based site that illustrates how religion began and developed into different countries. I like this form of infographic because it is more of a movie because of how it automatically plays if the user does not interact with it. The user does not have to figure things out on their own. However, if the user chooses to stop the movie and look more carefully and a certain part of a timeline, he/she may choose to. I also like how the map occasionally zooms in and out so that the user can see different parts of the world compared to other parts of the world.

http://www.nytimes.com/interactive/2008/02/27/business/20071031_HOUSING_GRAPHIC.html?scp=11&amp;sq=&amp;st=m
 * Home Prices Across the Nation

(I will come back later)**

Hotspots
http://www.silobreaker.com/GeoEvents.aspx?default=true This interactive information graphic maps the "hotspots" of current news topics. The visual interface is fairly uninteresting, but the amount of information and the manner in which is has been organized is superb. The information, supplied via the news database for silobreaker.com, is mapped onto an image of a moveable and zoomable world map in the form of a circle, whose size correlates to the popularity of the news topic in terms of article volume. Hovering over the hotspot shows an annotation of the news story, and clicking on it further analyzes the topic, bringing the user to a page that features links to news stories on that particular topic, as well as quotes, and related stories. The range of news stories that it sorts and totals is chronologically indexed, but is extremely flexible, giving the viewer the option of choosing the topics of the day, the week, or the month. Along with these fixed categories, the infographic also allows the user to input his/her own timeframe. Another dimension of flexibility lies in the fact that the inforgraphic is searchable according to topics. Although the infographic lacks visual interest in the form of flashy transitions or refined graphics, it displays information in a manner that is very accessible and easily located. Overall, the information is very simply presented, and straight to the point.

iGoogle
http://www.google.com/ig

IGoogle displays information chosen by the account user. Depending on their choices, it can display news articles found on other websites, entertainment, weather, time, games and much more. It permits the user to personalize his/her search engine.

Imperial History of the Middle East
http://www.mapsofwar.com/ind/imperial-history.html

This infographic presents to us a map of the Middle East. When activated, it plays the movie identifying the parts of the map that were taken over by by the empires and kingdoms of the past in the time period presented in the navigation bar at the bottom. The user is free to select the time periods that he wishes to view and pause the movie, and is given the option of hiding the borders of the reign.

This infographic is relatively simple and straightforward. It is a great way to present the chronological information. Some improvements can be presenting the user with additional notes about the empire when the highlighted part of the map is clicked for a more interactive experience.

In Their Ads, the Words They Use
http://www.nytimes.com/interactive/2007/12/27/us/20071228_ADS_GRAPHIC.html

This information infographic provides a list of the most common words mentioned in each of the political candidate's The words are scaled according to the number of times they were used by major candidates in television advertisements through December 23. The user can click on the highlighted words to view more information, such as how many times the word was said, along with providing some videos of the candidates and their speeches using those particular words.

Info. Graphic
http://www.emakmafu.com/designspam/category/information-graphics/ This website has interesting information graphics for The New York Magazine. The designs focus on the intensity of lines, shapes, and colour to create interesting maps, and information pieces. The designs can be a little confusing as the information is scattered and difficult to comprehend. However, the maps created are complex but easy to comprehend and follow because of the consistency of lines, and contrasts of colours.

Israeli-Palestinian Conflict Timeline
http://justvision.com/en/timeline

This website is a circular timeline of the subjective history of the Israeli-Palestinian conflict, composed of historical and personal events. The size of the dots indicate how many people have chosen an event as a significant moment. orange dots indicate historical events, red dots indicate personal events, &amp; dark orange indicates events that are both. This particular visualization aims to raise the awareness of local &amp; international audiences about under-documented Palestinian &amp; Israeli joint civilian efforts.

I Want You to Want Me
[|http://iwantyoutowantme.org] Showcased at the MoMA, I Want You to Want Me is an interactive piece about online dating. The work gathers information from several internet dating sites every couple of hours, looking for specific phrases. The infographic is presented on a 56" high-resolution touch screen in the form of floating balloons, each on representing a dating profile. These balloons are sorted visually by gender with blue for males and pink for females, and by age through its brightness. Younger profiles are brighter whereas older profiles appear darker. Enclosed in each balloon is a video silhouette of a person engaged in some kind of activity (such as yoga, jumping jacks, or nose-picking). Touching any balloon the first time reveals more information, and a photo dangles from its string, and a sentence appears in a thought bubble overhead. Touching the same balloon a second time closes it by popping it.

This information is then sorted into five different categories: //Who I Am, What I Want, Snippets, Matchmaker, and Breakdowns//. The category of Who I Am depicts sentences beginning with "I am", showing ballons that fly randomly in the sky. What I want shows sentences beginning with "I am looking for", and the balloons change formation to form a pulsating heart. Snippet shows opening sentences of profiles closing sentences and subject lines in various forms. Matchmaker uses an algorithmic formula to pair balloons based on their profiles. Breakdowns shows the most popular turn-ons, first dates, desires, self-descriptions, and interests, and are displayed in balloon clusters, with its size representing its popularity. This particular infographic is interesting because it indexes qualitative data rather than hard statistics. The balloon act as a visual metaphor for the enclosed personal space and identity of each individual, reminding viewers that even within a relationship, people are still inevitably enclosed within themselves. It takes information and categorizes it based on sentence structure, and aims to create some kind of social meaning. Visually engaging and informative, it is an infographic that acts as a mirror, reflecting the viewer as they browse through the lives of others.

J
http://www.jiffylube.com/education/howcarswork/howcarswork.aspx?whichService=differential&amp;whichStep=maintenance
 * Jiffylube: How Cars Work**


 * Type:** Spatial

A very graphical way to explain the features of a car. The visual representation provides a much better explanation than just text or complicated diagrams. The simplicity and cartoon look, adds incentive to learn more about how cars work. As you scroll over a given topic, there is a brief looped animation which catches your attention. It is a good feature in providing interactivity with the viewer. When a subject is clicked, the information explains the action in the animated diagram. The actual layout is very well designed. It is like a video game where there are different options and different modes. The user friendly look it delivers is something people of all ages would want to use.

Navigation is easy and straight to the point. Everything is very simple and straight forward. There are no loose ends or confused attributes in the infographic.

John Grimwade Information Graphics
http://www.johngrimwade.com/ I quite like this information graphic website as it illustrates different solutions to various types of information graphics. Information graphics are quite complex and take careful planning in order to create something innovative and interesting. As well, the website layout is simple and elegant which makes the experience to the user interesting. His website is a portfolio of information graphics and it is inspirational to look at his work because he approaches problems in unique and innovative ways. His work is excellent.

**John Maeda**
[|http://www.maedastudio.com/index.php?category=all]
 * Type:** Mostly quantitative

bio: http://plw.media.mit.edu/people/maeda/bio.html

Is a Japanese-American computer scientist, graphic designer and author of many publications, most notably the Laws of Simplicity.

While attending software engineering at MIT he became enamored of the work of Paul Rand and Muriel Cooper, who was a director of the Visual Language workshop at the time. After completing his

The aesthetics of his works can be described as simple, straightforward and math-y. His projects clearly demonstrates a great balance of form and function, stripping away any unnecessary glossy, vector-y, illustrator-gradient elements and working purely with the medium at hand: the computing power of - computers. One of the pioneers of today's interactive info-graphics field, he'd began investigating where computer mathematics meet art and aesthetics since the early 90s.

In my opinion Maeda's work is a very refreshing alternative to today's flourishing field of interactive media with all its overwhelming color-coding and super-smooth-transitions and visual fireworks. Maeda shows that minimal interactions such as simple as a input-text box and a button or a drop-menu, when backed by interesting information and grounded with a thorough exploit of the possibilities of computing capabilities can be equally as exciting and illuminating as things like [|this].

Josh On's They Rule
http://www.theyrule.net/
 * Type:** Spatial, somewhat quantitative
 * Technical (Interaction):** mouse click, mouse drag, rollovers, text input, drop down and collapsible menus

They Rule is an interactive website that creates "maps of interlocking directories of top companies in the US in 2004". The way the information is organized is fairly consistent: a company or an institution is represented by a corporate desk (desk with 3 feet for company, 2 feet for institution), each director is represented by an iconic person made unique by its name and gender--as well as weight (the heavier or fatter he looks, the more connections a person has / more power). The links (relation, connection, or association) are shown as lines, and all these elements are completely draggable that allows you to organize your map however you want.

You can create maps by searching the name of a director, name of company, or name of institution. When you rollover a desk or a person, you are given more options such as expand, contract, delete (on stage), and know about the respected selection. You can then make an account to save the map you made in their database. You can load other people's maps chronologically or by popularity.

Navigation is very simple and is intuitive. The limited use of palette is effective, and the style of graphics is appropriate and professional. It also has a link to the creator's blog as well as a help area that explains how the site works.

This site deals with a lot of user interaction, and can be a useful resource for backing up theses.

**LastGraph**


http://lastgraph.aeracode.org/

Developed from Lee Byron's original Last.FM visualization posters ([|http://www.megamu.com/lastfm/)], LastGraph replicates Byron's graphs without access to Byron's original source code. The site takes your data that was "scrobbled" to your Last.FM account. Last.FM records what music you're listening to at a given time and creates a log. LastGraph accesses those logs and generates a visualization using a custom library called "Graphification".

The site generates extremely large graphs which are downloadable in PDF and SVG formats but there are several disadvantages to this service. First, the amount of time that it takes to generate a graph can be days since the server has to collect the data specified from Last.FM first and then start to generate the graph which can also take a long time due to a slow name-placing algorithm. Another disadvantage is the lack of real-time viewing. It would be very interesting to compare your listening habits over the course of a day, week, month and year easily.

A great advantage of this service is an editable vector image of your graph that you can print at any size that looks great and has great personal meaning. You can compare the artist to the date at the bottom and relate to that time.

Life Cycle of a Blog Post
[|http://www.wired.com/]



Wired magazine is an infographic flow chart. It shows how a blog post penetrates the web before it finally gets to the readers (after you click the ‘publish’ button, exciting things like ping servers, data miners, search engines, text scrapers, aggregators, social bookmarking sites, online media, spam blogs and finally readers get involved).

You have a blog. You compose a new post. You click Publish and lean back to admire your work. Imperceptibly and all but instantaneously, your post slips into a vast and recursive network of software agents, where it is crawled, indexed, mined, scraped, republished, and propagated throughout the Web. Within minutes, if you’ve written about a timely and noteworthy topic, a small army of bots will get the word out to anyone remotely interested, from fellow bloggers to corporate marketers.

Visually the site is attractive but the only multimedia aspect it has is zoom, which is a little disappointing. When it came to the design, they stopped at the infographic, when it could have been much more interactive and informative, where the viewer could see all the ways that data massaged, reformatted, sliced and diced and transmitted, as there is a lot that happens in that process.

[|http://www.ljmindmap.com] ** LJ Mind Maps is a simple application where a LiveJournal user can enter their name and get a map of their friends. The larger the type, the more commonalities you have with your friend. It also shows who else has a map on the site with the [ ] and you can click on their name to view their map. The simple interface makes it easy and fast for the map to load and accessible to browsers without special plugins like Flash.
 * LJ Mind Map

However, the map can get rather complicated to read at times and it takes a bit to be able to read the map. Not too many hints on what each things mean without reading the lengthy documentation that comes with it

Lovelines
http://www.love-lines.com/



When you enter the website, it gives you the most recent entry inputed by an individual saying something that they love. For example: "I love Interactivity". On the bottom, it'll say how long ago the entry was done and by either a male or a female. When you click the next button, it continues to give you more "I love" sentences. You can continue to click the "Next" button, or you can drag the timeline on the bottom of the page. As you advance through the timeline, you will find that it goes from "I love", to "I liked", "I wanted", to "I don't like", to "I don't want", then eventually to "I hate".

You can navigate from the top according to the dates to see what people loved, or hated on that particular day. Further, it will give you the number of people that liked or hated something.

Map of Creativity
http://www.ngf.org.uk/map/map.html

The Map of Creativity is quite a clever infographic that focuses on "innovative educational projects throughout the world". It categorizes information in 4 categories: 1. Age - For what age is the project for? 2. Themes - What kind of project is it? (eg. Project for recycling, Project based on politics, etc.) 3. Ratings - How well done was the project? (from a rating system out of 5 stars) 4. Submitted - How long ago was the project? (eg. 1 to 3 months ago, 3 to 6 months ago, etc) I like this infographic because it not only lets you look at the projects from around the world, it also lets you focus in on one continent and even to one country. Also, if you are further interested you can find out more about each project.

My Map
http://christopherbaker.net/projects/mymap/

My Map is a relationship map about emails that shows connections between the creator friends, schoolmates, and so on. It also shows growth of the inter-relationships between the number of people. I think using circle is a effective way in dealing with complicated inter-relationships. Though the lines shown on My Map are not really easy to see, the concentration of the color of the lines is another way to show the importance or the priority of information. When you click on other people's portraits, it brings you to the another person's relationship map. Everything is linked.

N
Nike Plus http://nikeplus.nike.com/nikeplus/

Nike Plus is a website that allows users to track their runs. It tracks information such as distance, pace, calories burned, and time. It is interactive in that the user can make goals and resolutions and see their progress. When you focus specifically on the “runs” section, a graph is drawn that represents the single latest run, and then you can compare different runs using different variables.

The data that is acquired through each run is displayed in a clean visual way. It would be easy for the user to navigate and gain information from.

Non-Geographic Mapping
http://www.number27.org/projects/maps/traveltime/ This experimental map was produced for Princeton University's [|International Networks Archive], an organization dedicated to finding a new way of mapping our world. The INA believes that geography is becoming increasingly irrelevant, and that there should be a new system of mapping, based on global transactions instead of geography. This map is an exploration into this theory, and reconfigures 23 world cities based on travel time between the cities instead of distance. Click on different cities, and the other world cities will slide to reflect their travel time from the chosen hub. The icons along the left of the window represent the various means of transport, and the time cost of each, in travelling between the hub and the highlighted city.

Added by Antoinette T.

O
http://www.10create.com/infographics.html This info graphic explains the competition, tells you the kinds of strokes are involved, the length of the swim and you can see what the stroke looks like. It tells you everyone who is involved such as time keeper and stroke judge and about the pool and equipment used. It anyone knew nothing about swimming they would be completely educated after exploring this infographic.
 * Olympic Swim**

Oil Prices Reach a Symbolic Mark
http://www.nytimes.com/interactive/2008/02/19/business/20080220_CENTURY_GRAPHIC.html?scp=18&amp;sq=&amp;st=m

(i will come back later)

StumbleUpon
http://www.stumbleupon.com/

Stumble Upon is a Firefox application that allows users of the Firefox to search for specific websites according to their interests. When first installing the application, it asks for basic information as well as a few of your main interests. After installation, a Stumble button is placed at the top of your navigation bar. Upon clicking this button, the application will randomly bring you to a page that it feels you will enjoy, in reference to your interests. Other people with the application can give any site a thumbs up or down and is then recorded in the Stumble database. If many people with the same interests as you thumb up a site, the next time you stumble, the chances of you landing on that page will be higher.

This application is addicting and only amplifies the effectiveness of the internet. The application is extremely easy to use and is also fun and exciting for the user. The concept behind the app is amazing, narrowing down search results tailored to your interests and cutting out cyber junk you don't want to see.

Contributed by your friendly neighbourhood, Christopher Cheong

The 2007 State of the Union Address:
http://www.nytimes.com/ref/washington/20070123_STATEOFUNION.html




 * Type:** Quantitative, slightly Chronologic
 * Technical (Interaction):** mouse click, text input, drop down and collapsible menus

This interactive information graphic depicts the words that were spoken over the years during President Bush's State of the Union Address. According to the information provided by "The New York Times" there have been an average of about 5,000 words for each year. The tools provided by this interactive infographic allow the user to search and analyze what President Bush has said. Words appear irregularly and others more frequently.

One can search words randomly by typing them in in the search bar. If found it will show which year or years the word was spoken and how frequently. Another search option is to select from the category of pre-selected (more frequent) words in the drop down toolbar. When the word is selected it appears in the right hand column. This column shows a list of 8 words with the proportion of their usages separated into years from 2001-2007. The proportions are represented by a range of appropriately scaled circles. The list of words allows the view to compare the proportions of their usage with other words.

Another interesting aspect of this piece is that once the word is selected along with a specific year in the right column the occurance of each word is represented by a red point in the yearly columns of the main infographic and displayed at the bottom of these columns is the context within which the word was used.

I think this is especially useful in helping to prevent a bias, inaccurate representation of how President Bush used the word. The piece was thorough and engaging even though the actual graphics were plain and "border-line" bland.

http://www.newsweek.com/id/43257
 * The Sputnik Legacy**

The Sputnik Legacy is a website that visually organized a timeline of space exploration. Each mission is shown in the form of a little dot. The missions (dots) can be revealed by year, planet, and country.

I find this a very effective way of organizing the information on a single viewing format. All the information is there, an it remains clear, because it allows the users to chose which missions are to be highlighted by the circumstance of their choice. An important feature is mousing over the actual dots to see a mission summary. Without this feature, the dots would be meaningless.

The Super Ad Bowl: Two Decades of Players
http://www.nytimes.com/interactive/2008/01/31/business/20080204_SUPERBOWLADS_GRAPHIC.html This infographic shows advertisements shown during the Super Bowl fro 1984 to the present. It provides the data in a chronological order in which you, the user can scroll through, starting from 1984 and going to the present. Within that timeline, it breaks down the ads into groups (vehicles, food, films, beverages, etc) so that the user can get an idea of how many ads for beverages were shown during the 2000 Super Bowl. The infographic then goes on to show the percentage of ads that featured humor, animals or celebrities. Scrolling through the ads, the user is provided with brief description of eah ad along with the company behind it, where from here, you have the opportunity to view that advertisement.

Theban Mapping Project
http://www.thebanmappingproject.com/

The Theban Mapping Project is an interactive flash infographic website that presents several interactive maps of the archeological explorations of the "Valley of the Kings, Valley of the Queens, outlying wadis and the Tombs of the Nobles, plus all the memorial temples, shrines, villages, graffiti, predynastic remains, and Christian sites." ([|http://www.thebanmappingproject.com/)]

The user can pass their mouse over certain areas of the map which will prompt it to show the name of the site/location. Once they clock on a part, he map will zoom in on that site and a more detailed view of the location will be given.

The map can be viewed under three different methods: overview, description, and maps and plans. Under overview and description the user can click on this part of the map and a more detailed description will be shown on the right side.

**The Blues**
View [|here] Type: Chronological Interactions: rollover, mouse click, popup This infographic is about the history of the Blues in the United States. It is also in Spanish, the North American option is at the far right. You can navigate through clicking on the different cities and names. If you click on the names, sound clips of that musician will play as well. Each city has a different history of blues and music in a time line like layout. When you rollover that part, it will slide, revealing more information.

The layout is nice aesthetically, but the functionality lacks in a few areas. It took me a while to find the back button. There are multiple different buttons that you can press that get you to the same place which is misleading. Also, there are too many pieces of information and accessible buttons that overlap each other. Although, I like the aesthetic of the piece.

The Ebb and Flow of Movies: Box Office Receipts 1986 - 2007
http://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.html

In this information graphic about movies, you can visually see how well a movie did at the box office as far back as 1986. Spatially, it displays how much money the movie made by the size and position of the coloured representation. Also the information graphic has movies across a timeline in chronological order. I find the comparisons between each movie very successful and fluid. I would like to see this type of representation on a different topic. Even though you have the ability to search for movies by typing the movie title inside the search window, you are unable to look at movies made in a particular year. By accessing the information by year, it would make the information graphic a lot stronger.

This interactive graphic from The New York Times looks at blockbuster movies and compares how much money each movie had made. The information graphic at first glance is very complex and difficult to understand but the use of roll-overs allows the user to distinguish particular movies.

The Map of Springfield - Home of the Simpsons Family
Someone had alot of time on their hands to create this... http://adn.blam.be/springfield/

This website is devoted to creating the actual city that //the Simpsons// reside in, and is continually updated based on episodes of //the Simpsons// (originally it was based on maps within //the Simpsons// website). Inconsistencies of episodes have made it impossible to know the exact whereabouts of every single place within Springfield. The map not only shows where different places are within the city, it also allows you to click on images to see the cartoon version of a particular place. It is also possible to zoom in and out and move throughout the city. It's interesting to see the distances between different locations, such as Lisa and Bart's school, compared to their house, and if it was really necessary for them to take a bus to school everyday.

This map has also been added to the [|Harvard Map Collection] which shows its true prestige.

The New York Times: How Class' Work
http://www.nytimes.com/packages/html/national/20050515_CLASS_GRAPHIC/index_03.html This New York Times interactive information graphic looks at how class' work. It separates information into several categories such as class, nationwide poll, income, elasticity, countries, trends, education, wealth, occupations, etc. It is very detailed and interesting to looks at and interact with. The user will further understand at different ways to look at class an d will learn how mobility has changed in recent decades.

The New York Times Magazine: Iraqi Killings
http://graphics8.nytimes.com/images/2007/09/21/washington/21blackwater_graphic.full.jpg This image is interesting as it shows the Iraqi accounts of killings. The 3D layout is interesting and simple to understand. This layout would be more powerful if it was interactive but the information given is interesting to look at and learn about.

The Wealthiest Americans Ever
http://www.nytimes.com/ref/business/20070715_GILDED_GRAPHIC.html

This interactive information graphic displays a combination of chronological and quantitative information. It clearly communicates the order of wealthiest man ever in America by using numbers and different sized circles to show how much each man is worth. As you move your mouse over the individual, it displays more detailed information about that person. Another reason why I decided to share this information graphic is to demonstrate the simplicity of the work. I don't think it would be to hard to construct in flash.

Problems I had with this information graphic is that it is very narrow, in that it could have showed wealthiest women in america. As well the piece should have the ability to illustrate wealthiest people in different countries. I also thought the life span section could be more clear. When trying to compare the age of each individuals it wasn't a smooth comparison. The information regarding life span could have been presented more clearly for the viewer to make stronger connections between the men.

The Whale Hunt
http://thewhalehunt.org/whalehunt.html



This is a photographic experience which 18 people log their 7 day journey on a yearly whale hunt. By looking at the photographs, you can achieve a sense of the things they experienced through their journey.

When you enter the site, you can start off with a mosiac of images. The top images represent the earlier parts of the journey, and the ones lower, represent the later parts. Once you click on an image, it brings you to a timeline, which is more specific to that part of the journey, showing the time and date. You can navigate through the images by dragging the timeline in the bottom, or you could watch the images play by themselves. At any point, you can move from any part of the timeline, backwards or forwards or even pause and play the hunt.

The site gives you various options on how you want to view the images. Below they give you the "Autoplay", "Mosiac", "Timeline", or "Pinwheel".

Time Magazine: One Day in America
http://www.time.com/time/2007/america_numbers/commuting.html Time Magazine plotted various info graphics about the daily life of an average American. The information was divided into four categories (commuting, job happiness, free time and drinking) that combines both spatial and quantitative information. In commuting, information about the average commuting time and traffic delays were plotted on a map of America through cones that differ in colour and height. A selection of cities also displayed the shift in population from day time to night. In here, the interaction are mostly rollovers; the user's mouse hovers over a city, the amount of hours show up. Job happiness displayed information through a scale from most happy to least happy and jobs are plotted in thin lines according to the percentage of people that are "very happy" with their jobs. When the user's mouse hover over the lines, the name of the job and the percentage shows in a separate box. The user can also choose a specific job from the given menu and its rank will be highlighted on the scale. The free time section shows the amount of hours an average American spends on activities like watching TV or surfing the net, however this involved a different interaction where the user is able to input the amount of time they spend on an activity before seeing what the average is, in order to compare the information. The drinking section plots the amount of alcohol being consumed per person, again plotted on a map of America. When the user hovers over a state, gallons per person shows up. Navigating through the information was easy and the information displayed was thorough.

**Time's Person of the Year from 1927 to 2007**
[|http://www.time.com/time/2007/poy] This infographic illustrates Time's Magazine Person of the Year from 1927 to 2007. The interaction are mostly mouseclicks. When you rollover the magazine cover, a magnifying glass is shown, indicating to the viewer to click on it. Once you click on it, a little pop up shows up. This pop up gives a little information about the Person and how they influence society that year. You can then click on the cover on the pop up and it will take you to the actual article. On the left side, there are ways to organize the information to your liking. You can choose to organize the covers by year or categories. If you choose to view them by categories, you have an option of highlighting those categories. There are six categories and they are: U.S Political and Military Leaders, International Leaders, Business and Technology, Science and Medicine, Religion Philanthropy, and Concepts. When you click on one these categories, it highlights the covers belonging to these categories and darkens the rest. Its a good way of organizing these covers, so that the viewer knows about how these Persons affected society, whether it be politics or religion. The information was clear and easy to understand. However, It did take a long time to load, but other than that, it was informative and interesting to navigate through.
 * Type:** Chronological
 * Interaction**: Rollovers, Mouseclick, menus, pop ups.

USA Today: Going Green
http://www.usatoday.com/tech/graphics/going_green/flash.htm
 * Type:** Spatial
 * Technical (Interaction):** rollovers, mouse clicks

This interactive infographics features ways on how to live a "greener" life. In terms of form, it uses very basic, almost architectural overview of a typical house (similar to Sims), and provides visual icons as clues that define the space (ie. car and bike for garage). The use of the limited palette is also logical. The information is organized per distinctive areas in the house (spatial)--such that when you click on kitchen area, it will display kitchen-related ways on how to go green. This info is displayed in a pop-up as tiny paragraphs with subheadings and arranged top to bottom by difficulty (indicated by a color range of light to dark green). The quantitative aspect, if available, is presented in paragraph form along with the "going greener" suggestions. The pop-window will close after hitting "Close [x]" button. There's a button that links to an external article relating to this topic. If s/he wants, the user can also send this to a friend. I found this site really enjoyable mainly because of how the info is organized. It allowed me to imagine myself walking in the environment (as in video games) and thus enabled me to relate to it more. It would be interesting though (if possible) to see a quantitative relation from the information given.

**U.S Name Popularity**
http://www.nytimes.com/2007/11/17/us/17surnames.html?_r=1&amp;oref=slogin

This infographic was found on the New York Times website. It is a way to find out the popularity of the 5000 most common names in the United States. It gives the rank of a specific name on the list of 5000, 1 being the most common, and then tells you the number of time the name occurs in every 100 000 people as well as how it ranked in 1990. It also shows the calculated number of the change in rank. The user can either scroll through the list of names or enter a name in the search field at the top.

The layout of this graphic is very clear and easy to navigate. Size is used to determine hierarchy within the list of names as the most popular ones are very large and they get smaller as the list goes on. However, around number 25 the font size remains the same as if it continued to shrink it would become impossible to read.

USA Today: Going Green
http://www.usatoday.com/tech/graphics/going_green/flash.htm
 * Type:** Spatial
 * Technical (Interaction):** rollovers, mouse clicks

This interactive infographics features ways on how to live a "greener" life. In terms of form, it uses very basic, almost architectural overview of a typical house (similar to Sims), and provides visual icons as clues that define the space (ie. car and bike for garage). The use of the limited palette is also logical. The information is organized per distinctive areas in the house (spatial)--such that when you click on kitchen area, it will display kitchen-related ways on how to go green. This info is displayed in a pop-up as tiny paragraphs with subheadings and arranged top to bottom by difficulty (indicated by a color range of light to dark green). The quantitative aspect, if available, is presented in paragraph form along with the "going greener" suggestions. The pop-window will close after hitting "Close [x]" button. There's a button that links to an external article relating to this topic. If s/he wants, the user can also send this to a friend. I found this site really enjoyable mainly because of how the info is organized. It allowed me to imagine myself walking in the environment (as in video games) and thus enabled me to relate to it more. It would be interesting though (if possible) to see a quantitative relation from the information given.

VisuWords
http://www.visuwords.com/ [|jasonvisuwords.jpg]

Visuwords is an online dictionary/thesaurus/idea and concept developer. It acts like a interactive flowing concept map. Each circle represents a concept/idea of the entered word. When the user hovers over a circle, a information box appears and gives related words as well as a dicitonary definition of the term. Being a free-flowing interactive infographic, terms can easily be dragged off screen or zoomed in. By clicking on a term/circle, new terms/ideas spawn from it, thus widening the concept map. The information is organized through colours and lines as illustrated in the picture below.

[|jasonvisuwords2.jpg]

Nouns, Verbs, Adverbs and Adjectives are identified by different colour circles. Connecting ideas are then identified by different colour/shaped lines. This infographic contains spatial and quantitative information. Having strong like ideas closer together and smaller not so powerful ideas further away from each other. Also, there is a constant flow of information if the user chooses to keep clicking on terms.I think this infographic is well done. It is very simple and clean looking, there is not much signal to noise. The information is presented in a clear, graphic way. It can become boring after a while though because it is so simple. I found that more detailed terms will not work in this infographic, only big terms which can be related to many topics. Ex" Television." For brainstorming and concept development this infographic gives general ideas of the topic.

**We Feel Fine**
www.wefeelfine.org
 * Type:** Chronological, quantitative, spatial in separate but justified forms

This interactive infographic is built on a system that threads together all the sentences on the world wide web that contains the word "feel". It then takes this ephemeral package of data and swivels it visually in four ways. The user may view it by place of origin, by feeling, gender, age and etc. This is a good example of how a single set of information can be concreted in different, distinct ways - spatio-temporal, chronological, and quantitative, and yet having each of them contain some sort of visual key that serves as a unifying factor. In this case, it is their use of flat planes of colour and use of typography. It's a very fun interaction!

What If?
View [|What if?]

This infographic tells you about the possibilities of different lives. Interacting with timelines of different life stories and possibilities allows you to follow different biographies of the same person and see how they develop, their life journey until their death. To do so the infographic is interactive so that when you click on each individual person a separate window pops up to describe the scenario of the persons life.

I found this infographic to be a fun and logical, easy to follow and navigate. However I feel that there could be a clearer. For instance, including rollovers so that is obvious to the user to click on the various people. Also maybe make the pixel figure could be bigger when you rollover or click on it bringing the information in a thought bubble rather than a separate window. Aesthetically I find it suitable for the comical and sporadic bits of information however, instead of having it separated into two images it could be more effective if it were one image that scrolled as you progressed through the story.

**WIRED Magazine Infoporn: Humans Crawling With Microbes?! That's Not All Bad.**
http://www.wired.com/medtech/health/magazine/16-03/st_infoporn This interactive info graphics from Wired magazine represents the amount of microbes on a human body. It combines spatial and quantitative information in a very straight forward graphic interface. The amount of microbes per cm sq is represented by circles in different sizes and patterns and the circles are placed on the body part where the microbes are found. It also involves a simple interaction that looks like it will be easy to do in Flash; when you roll over the label for a body part, a box opens with more information about the microbes that resides in the chosen body part. I like their direct approach with the graphics and interaction, it's very user friendly and the information is communicated right away.

Worldometers
http://www.worldometers.info/

Worldometers is managed by an international team of developers, researchers, and volunteers with the goal of making world statistics available in a thought-provoking and time relevant format to a wide audience around the world. Sources are carefully selected to include only data published by the most reputable organizations and statistical offices in the world. The counters that display the real-time numbers are based on Worldometers’ algorithm that processes the latest and most accurate statistical data available together with its estimated progression to compute the current millisecond number to be displayed on each counter based on the specific time set on each visitor’s computer clock. It entails filtering the information, establishing relationships, and representing them in a manner that enables a consumer of that information construct meaningful knowledge.

Zipcode : USA
http://acg.media.mit.edu/people/fry/zipdecode/

This is an interactive map of USA with the sole purpose of showing the location of a particular zipcode. A zipcode can be typed in and the location will be highlighted on the map. A zoom option is also available, but only two levels of zoom are possible.

This is a particularly useful map to help the user determine the name of the area the zipcode refers to, as it shows the location name when the zipcode is typed in.

This map is easy to understand and navigate and because it has only one function, it's a very simple but effective design.