Welcome to our web color community. Here you'll find the latest web-focused Palettes and Patterns, as well as Blog, Trends and Forums to help guide your next web design project.

Channels»Web»Blog
Communicating Through Color: Infographics

Communicating Through Color: Infographics


As we've brought up before here, color is an innate visual language that can be an extremely useful tool in conveying information. The use of color in information graphics groups, highlights and sorts the necessary information, simplifying the meaning and making it easier to communicate to a larger number of people.

Two great places to come by colorful infographics are visualcomplexity.com and GOOD Magazine's Transparency section. Here are 12 infographics from those very places.

"Functional visualizations are more than innovative statistical analyses and computational algorithms. They must make sense to the user and require a visual language system that uses colour, shape, line, hierarchy and composition to communicate clearly and appropriately, much like the alphabetic and character-based languages used worldwide between humans."
- visualcomplexity.com/about

Obesity System Influence Diagram

obesity.png
Full Interactive Map

Developed for the Foresight Tackling Obesities project, this causal loop map was designed to provide systemic insight into the multiplicity of factors contributing to the obesity epidemic. Behind the simple result of people becoming heavier, lies a complex web of often reinforcing causal factors that range from individual psychology and physiology to the culture and economics of food production, food consumption, attitudes toward physical activity, and structure of the built environment.

The 108 variables shown on the map - the drivers of obesity - were compiled by shiftN, from the 38 science reviews produced for the project and then vetted by the project's science team. The drivers are woven into systemic picture by the positive and negative influence arrows that link the variables into a web of causal relationships.

Visualizing the Bible

biblevizarc7mediumorig.jpg

This set of visualizations started as a collaboration between Christoph Römhild and myself. Christoph, a Lutheran Pastor, first emailed me in October of 2007. He described a data set he was putting together that defined textual cross references found in the Bible. He had already done considerable work visualizing the data before contacting me. Together, we struggled to find an elegant solution to render the data, more than 63,000 cross references in total. As work progressed, it became clear that an interactive visualization would be needed to properly explore the data, where users could zoom in and prune down the information to manageable levels. However, this was less interesting to us, as several Bible-exploration programs existed that offered similar functionality (and much more). Instead we set our sights on the other end of the spectrum –- something more beautiful than functional. At the same time, we wanted something that honored and revealed the complexity of the data at every level –- as one leans in, smaller details should become visible. This ultimately led us to the multi-colored arc diagram you see below.

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.

2008 Presidential Candidate Donations

4_final-2.jpg

In an effort to better understand the patterns within the 2008 presidential candidate donations, the authors produced this interesting diagram, mapping all donations made between January 2007 and July 2008, to McCain (left in red) and Obama (right in blue). The two inner circles represent the total amount of donations for both candidates, while the outer segments illustrate variations in the amounts donated. The top-most bracket is any donation between $1 and $100, the second: $101 - $500, the third: $501 - $,1000 and the final: all amounts over $1,000. The size of each bracket represents the percentage amount that bracket constitutes in a candidate's total donations, and the hair-like lines coming out of them are the names of each donor, which produces a useful visual reference to the density of each category.

4_final-3.jpg

The distinction between candidates is immediately perceived with this visualization. As the authors explain: "What is most striking to us is how much more of Obama's donations come from the $1 to $100 bracket. We found a high number of students, artists, unemployed and self-employed people who fell in this bracket. One can speculate that these are the younger-generation individuals who will be voting for the first time or they are a struggling class of lower income workers. Probably more significant: this shows how much internet contributions have helped the Obama campaign, assuming the smaller amounts were made online. This data also shows that a majority of McCain's donations come from the $500 to $1000 bracket of donors. The amount is still smaller than Obama's, but this makes up almost two-thirds of his donations".

Since the donation information must be disclosed to the public, the authors turned to the Federal Election Commission to find a data set containing all donors, the amount they donated as well as other information they may explore in the future (e.g. occupation, zip code, employer). The data set time span is currently from January, 2007 through July, 2008, but the authors will be updating this information every month, as new data is released.

Natures

natures-1.png

Natures is a project that explores the dialogue between the natural and the artificial, creating a world where these two elements coexist harmoniously. It consists on a series of audio-visual compositions that simulates organic behaviors through an atypical use of motion tracking techniques.

The melodious movement of plants spinning with the wind triggers an intricate web of computer-generated lines and shapes. Interpreting the organic structures of the plants, the artificial element becomes part of the natural and vice versa.

natures-2.png

Natures can be shown both as a single channel or a multi-channel piece.The multi-screens option consists in a large scale high definition video which is projected across 3 adjacent screens. The setup is flexible to be installed vertically or horizontally with 2 or 3 screens.

Web science: an interdisciplinary approach to understanding the Web

2617629387_09cd13e9af_o.png

Generative artist Marius Watz has contributed to the July'08 edition of ACM's Communications magazine with a striking piece. The art work is featured on the cover and an inner article entitled: "Web science: an interdisciplinary approach to understanding the Web".

The article written by James Hendler, Nigel Shadbolt, Wendy Hall, Tim Berners-Lee, and Daniel Weitzner, focuses on many of the challenges currently facing the Web. As they state in the beginning of the article: "Despite the Web's great success as a technology and the significant amount of computing infrastructure on which it is built, it remains, as an entity, surprisingly unstudied. here, we look at some of the technical and social challenges that must be overcome to model the Web as a whole, keep it growing, and understand its continuing social impact. A systems approach, in the sense of 'systems biology' is needed if we are to be able to understand and engineer the future Web".

Sharedegg

2344163441_e1f8e769e3_b.jpg

The images shown here are from an etnographic study which resulted in an engaging visual outcome, not common in this type of analysis. As the authors of the study explain: "Much of modern society is defined by material goods. In that sense, people are defined through other people's eyes based on what they do and do not or cannot own. Whether people admit it or not, judgments are made about people based on what they look like and what they own. These judgments might, in some cases, create unspoken bonds but in most cases create barriers between people".

2344992330_5452408caf_o.png

With the goal of representing the cultural similarities between random people, the authors asked 32 participants to list some of the products, and activities that they are involved with: what artists they listen to, what movies they watch, what television shows they watch, what websites they might visit, what brands and accessories they wear, what electronics they own, and where they have lived. After collecting all this information from each participant, they asked them to categorize those products and activities into preset subcultural categories: Bohemian, Casual, Cyber, Nerd, Emo, Gamer, Gangsta, Hardcore, Hippie, Trendy, Indie, F.O.B., Sporty, Preppy, Punk, Rocker, Raggae, Skater. The authors then came up with a taxonomy that allowed the data to be best visualized within the Many Eyes website.

2344992602_996341f419_o.png

What resulted from this exercise was a deeply complex image showing social trends and unknown bonds between people through those trends. Besides producing a general diagram of subcultures (shown here) based on the data collected from the people who make up those cultures, the authors also created a series of specific diagrams based on particular brands (e.g. Nike, Vans) or subcultural categories (e.g. Trendy, Casual). The general diagram employs an array of colors based on the above-mentioned categories.

Mapping the Human 'Diseasome'

disesome.png

Dr. Butte, an assistant professor of medicine at Stanford, is among a growing band of researchers trying to redefine how diseases are classified ? by looking not at their symptoms or physiological measurements, but at their genetic underpinnings. It turns out that a similar set of genes is active in boys with Duchenne and adults who have heart attacks.

The research is already starting to change nosology, as the field of disease classification is known. Seemingly dissimilar diseases are being lumped together. What were thought to be single diseases are being split into separate ailments. Just as they once mapped the human genome, scientists are trying to map the ?diseasome,? the collection of all diseases and the genes associated with them.

Shown here is the current map linking different diseases, represented by circles, to the genes they have in common, represented by squares. Each circle represents a disease or disorder and is scaled in proportion to the number of genes associated with that disease.

Twitter Social Network Analysis

465197793_41036dcc3a_o.png

Akshay Java, from ebiquity group, used the Large Graph Layout (LGL) tool to visualize a large social network on Twitter. The top graph shown here was built using contacts from about 25,000 users. Notice that there is a link connecting two users if either one has the other as a friend and hence it is an undirected graph (of about 250,000 edges). Compare this to the bottom graph that is constructed using only users who are mutually acquainted. i.e. A knows B and also B knows A.

465197795_01dc13ee6a_o.png

As Akshay reveals in his post: "I find that visualizing such large graphs is quite a challenge and to glean meaningful information from it is even more difficult". However, he goes further in explaining that some insights can still be gained from this project. Akshay points out that a number of users seem to be trying to win a popularity contest of some sort, while a number of bloggers and (perhaps fake) celebrity profiles have a huge fan following in Twitter. He also mentions how the two graphs look very different on account of the fact that users with public profiles get a lot of followers whom they might not really know and would hence never add them as an acquaintance. But to really understand what the differences are one would need to look at the community structure and properties of the two graphs.

ebiquity group has also explored the Twitter API in other projects in order to get a better understanding of the microblogging trend.

Today

today-1.jpg

TODAY is an application that visualizes your personal mobile communication. It sits on the periphery of your mobile, monitoring your connectivity through the number and type of calls made and received, subtly displaying them back to you, in the form of a generative graphic. Here, the visual result is a figurative and seemingly abstract picture - the story of your day. Some days will be really colourful and wired, others quieter and more reflective, either way the resulting visuals will always be personal, unrepeatible and unique.

Each event (call or message) has a graphic symbol that appears on the screen immediately after it happened. The position of the symbols follows a chronological spiral structure, where the last event is displayed at the center of the spiral. This means that everytime there is a new event, all the graphic symbols move one position, the result being an ever changing and evolving image.

today-2.jpg

Based on your phone usage, the program generates a graphic of your communication, whereby each phone number used during the course of the cycle, is given a colour and each communication with that colour is measured in time and intensity. Intensity is given visual weight through the speed by which you attend the call: an urgent call being literally more colour saturated than an untimely unknown number.

You can download the mobile client to any S60 device and visualize your mobile communication for up to a week.

Graph Drawing of Matrices

andrianovlpl1.gif
link

In mathematics, a matrix is a rectangular table of elements (or entries), which may be numbers or, more generally, any abstract quantities that can be added and multiplied. A sparse matrix is a type of matrix that while vast and multi-dimensional, consists mostly of empty space or zeros. They occur often enough to have a place in our work on science, mathematics and information theory.

andrianovmip1.gif

The two examples shown here are part of a vast gallery of graphs generated from 1890 sparse matrices in the University of Florida Sparse Matrix collection. Each of these sparse matrices is viewed as the adjacency matrix of an undirected graph, and is laid out by a multilevel graph drawing algorithm. If the graph is disconnected, then the largest connected component is drawn. The largest graph has 8863287 vertices and 44185251 edges. A simple coloring scheme is used: if the matrix has real entries, coloring is based on the entry value, otherwise it is based on the edge length.

Through this exercise the authors hope to have a better understanding on the type of structures studyed by people doing large scale computation.

Expect Delays

expect_delays-1.jpg

Every day, millions of Americans sit in traffic on their way to and from work. In that time, you could do a lot of things, like listen to an audiobook of War and Peace, relax to the sound of Wagner’s Ring cycle, or take in the entire Lord of the Rings trilogy.

expect_delays-2.jpg

If you live in any of these cities, here is the number of hours you waste in traffic each year, and the number of time you could get through these works.

Section 3, Pew 16

football_church-2.jpg

GOOD and Heavy Meta look at attendance at megachurches and football games in five states.

football_church-1.jpg


Related Articles

8 Comments
Showing 1 - 8 of 8 Comments
Good post!!! i'm fascinated with this graphics!!!
this is a fabulous post.
Way too much information in one take!

Hehe. Interesting post about a subject that's all around us each day. These diagrams are intriquing because each one is like a complex artwork that one could keep on examining for hours and still find something new.

The good thing about diagrams is that one can get some idea about the information by just one glance, for example if any of these huge ones were displayed in plain text, no-one would be able to make heads or teils about them without days and weeks of reading.
Excellent post on a very rich topic. I think it's fascinating that these graphics and diagrams have a potential for art when their primary purpose is purely utilitarian : organizing information in the most efficient and legible manner. Randomness and unpredictability, such as in word map generators you can find on the web, can also produce stunning pictures we may see as "accidental art".

But in the case of Christopher Harrison's project, I think aesthetic and art were the primary goal: the beauty of the diagram leads us to question the content and the meaning of the links, at another level than what it would seem at first sight.
Cool post!

This reminds me. At my paper, whenever we pull an infographic from where ever (let's say AP), my editor tells me how he imagines the people who make them and what their lives are like. It's kind of silly, but those inforgraphics are WOW! Amazing and beautiful! Those people are very talented. I guess with magazines and the internet, the creativity is unlimited!
I always enjoy to read about colour related design issue. This one on informational graphics is REALLY GREAT!

Thank you for share,
Jade
once again, great posts!

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

Attention #colourlovers: We're talking some dangerous bridge here! https://t.co/WD6ms0zVkv @LEGO_Group #colors… https://t.co/wNlQg42x1n
about 4 hours ago
Tweet this ArticleFollow @COLOURlovers

Latest Web Blog Posts

//View More ›

Tags

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›