World Economic Forum, Dubai Summit

Details coming soon: in brief, another collaboration with Nick Sears for the forum's summit in Dubai in November. We created the piece in a little over a week. The Phyllotaxis Lab's design director is Ben Fry, co-creator of Processing programming language.

iPad Earthquake Vis for Popular Mechanics
(USGS data feed)

Shortly after I made a presentation to the creative and editorial staff at Popular Mechanics about possible IxD and UX schemes/considerations for iPad app design and development, Deputy Editor, Jerry Beilinson and Senior Tech Editor, Glenn Derene commissioned a data viz about earthquakes. Nick Sears and I worked on this together. The app grabs data about the most recent seismic activity from USGS feeds via wifi or 3G. That quake data is rendered according to magnitude and depth. Users can also view the largest earthquakes from the last 150 years. Also visualized are population and population density values for the 25 largest cities of the lower 48 states. Gizmodo positively reviewed a sneak peak. There is also a piece with better video on AOL's Daily Finance

ABACUS (work with Lars Jan and Early Morning Opera)
Just completed another stint as a visiting artist at Rensselaer Polytechnic Institute's EMPAC with the LA-based Early Morning Opera, made up of director, Lars Jan, Nick Sears, Sonny Valicente, Chris Kuhl and Cal Arts faculty, Pablo Molina (video designer/developer) and Nathan Ruyle (sound design). The results had a test run for an audience at the C:ADM2010 Conference and the work premieres at EMPAC's Filament Festival in early Oct.

ABACUS Trailer — 3 1/2 min. from Lars Jan on Vimeo.

U.N. Imigration Map (Information Recast: A Flexible Map)
Launch Demo FYI - Upon launch, you might be asked to "Trust" a "certificate." Please do. It's harmless.

Information Recast: A Flexible Map is part of my ongoing information visualization series, Information Recasting. One of the primary aspects of the work in this series is the design of interfaces that give users control over the visual presentation of data. In this project in particular, special emphasis is placed on creating information visualizations that convey compelling narratives and ideas about the data that would otherwise be silent, hidden away because the data set is too voluminous and multifaceted to consider in a single space in a single moment.

The Flexible Map software is a tool for analyzing 2004 United Nations data on global immigration. The squares on the screen at run time represent the countries of the globe arranged by latitude and longitude. Users can mouse over any square to see the name of a particular country. The moving dots represent the amount of immigration from a country of origin to a country of destination. In this case, there are nine destination countries. They are among the major immigrant destinations, countries like the United States, Australia and Canada. (see Figure 1 below)

Figure 1, Mouse rolled over country (box), reveals "Canada"

On the interface control panel are a variety of features that allow users to alter the way in which data is displayed. They can change the arrangement of the countries on the screen from a latitude and longitude configuration to a circular one. The color of the moving elements can be altered so users can highlight all the immigration traffic headed to specific destinations. The paths of the moving elements can be charted by trail markers. The color scheme of the entire viewing environment can be changed. The map can be viewed from three-dimensions, and so on. (see Figure 2 below).

Figure 2, Control Panel. (more below)

During testing it became clear that this degree of control over the display of data creates a highly engaging user experience. It also became clear that this high level of engagement encourages more extensive and much faster exploration of a data set than if the users were to look at the same data in spreadsheet format. Users commented on dozens of interesting observations that they made during short periods of use; but the most interesting piece of feedback was the following: “This device turns people who normally only look at data visualizations into users who make them.” The analytical skills of each viewer add to the value of the visualization. Figures 3 through 9 below demonstrate some of the ways that this data can be viewed.

Figure 3, The dots representing immigrants moving to Canada are changed to the color red, and trails indicating their individual pathways are added. In this way, the user quickly gets a sense of the overall traffic and trajectory of immigration to Canada. (more below)

Figure 4, The overall color scheme of the environment is altered to white. (more below)

Figure 5, All the countries are arranged in a circle around a single destination. The dots representing immigrants to Canada are still red. (more below)

Figure 6, The same circular arrangement in 3D perspective, tilted backward. (more below)

Figure 7, This is the same circular arrangement in 3D, tilted backward, but the user has zoomed in and changed some of the colors of immigrants going to other destinations. (more below)

Figure 8, The map is returned to the latitude and longitude configuration in 2D. The names of all the countries are switched on. (more below)

Figure 9, This is the same configuration in 2D with the country names switched on, with a population density map overlay. (more below)

A compelling data narrative, a story told by a data visualization because it is expressing an idea about the data that is greater than the sum of its parts, begins to emerge when the user selects the "GDP per capita" arrangement on the control panel. In that configuration the map is organized with longitude on the horizontal axis and GDP per capita along the vertical axis on the screen. (see Figure 10 below)

Figure 10, GDP as the y axis in place of latitude. (more below)

Conclusion

Whether generated by sensors, keystrokes or code, the amounts and types of information being recorded in all aspects of every sphere of activity continue to increase, as does our demand to retrieve and interpret the information being collected. Furthermore, the increasing ease with which processors can render complex graphics on relatively light-weight platforms makes it easier for designers and analysts to quickly develop visualizations. In short, appreciation for data visualization and how it allows users to interface with and present data is on the rise. The greatest results will occur when users are encouraged to explore data and create visualizations in environments where it is easy to do so rapidly. That many of these visualizations can be created by professionals without design and programming knowledge increases the likelihood that a given visualization will elegantly advance a complex argument about data, an argument that would otherwise get lost in massive spreadsheet tables.

Visit Information Recast: A Flexible Map

You might also be interested in:
Information Recasting presentation during thesis week at ITP
Information Recast: A Flexible Matrix Description and Demo
Buzzmap, created for presentation at Where 2.0 Conference in San Jose, 2007
Paul Kedrosky blogs A Flexible Map
Presentation Designer, Laura Fitton blogs A Flexible Map
Resume

Edopter.com: Animated Timeline Graph

Launch Demo

Edopter is an online service that tracks the spread of new trends around the world in real time. The goal is to combine user insights and worldwide buzz to "tap into the next big thing." The project is headed and co-founded by Matthew Rosenberg and Andy ThompSon of One Blue Brick. They commissioned me to create a fun, but informative, analytical space to allow users of the edopter service to track in depth the progress of trends.

The tube or channel of blue dots crossing the top of the screen represents site traffic. Each dot is an edopter.com user. Those user dots that fall out of that line and get sucked into the trend represent edopter users that have evaluated the trend positively or negatively (they formally get in or out of the trend). Once they are sucked in, they position themselves on the sparkline according to the point in time they opted for "out" or "in" status. If they opt "in," the sparkline moves up, and if they opt "out," then down. Users who opted to get in on the trend take the risk because it may elevate their status system wide (which can win them prizes and influence) if the trend succeeds and moves on to mainstream status.

Each day, the web is swept by way of third party APIs to see if there is any media has been created about this trend, so every day, a marker added to the sparkline to indicate if such a sweep has revealed any buzz, something that also elevates the status of a trend.

Outside.In Visualizaiton of Location-Specific Blog and Mainstream Media Activity
Created for Outside.In, this visualization was presented at the Where 2.0 Conference in San Jose by author and Outside.In co-founder, Steven Johnson. The interface visualizes location-specific blog and mainstream media activity during a six-month period, from December 2006 to May 2007. The region of the map covers a section of Brooklyn that includes Ft. Greene, Boerum Hill and the northern tip of Park Slope.
Tripledex Graph: Social Network Visualization
The fundamental purpose of Tripledex is to allow users to easily collect and meaningfully display data Triples. A "Triple" is a simple data model where two entities/nodes have a single relationship. The format is expressed as follows, entity ~ relationship ~ entity. The entities and relationships can be virtually anything. This generic and flexible design makes it a powerful means for exploring social data. These are are a few examples of triples:

Jonathan ~ designs ~ data visualizations
Jonathan ~ lives in ~ New York
Jonathan ~ graduated from ~ NYU
Jonathan ~ speaks ~ English

Jeff ~ lives in ~ Edinburgh
Jeff ~ studied at ~ Cambridge
Jeff ~ speaks ~ English
Jeff ~ has expertise in ~ Baroque art
Jeff ~ has expertise in ~ Renaissance science
Jeff ~ has expertise in ~ fresco restoration
Jeff ~ listens to ~ The Beatles
Jeff ~ vacationed in ~ Barcelona
Jeff ~ email ~ caravaggioNut@yahoo.com
Jeff ~ born in ~ Wales
Jeff ~ married to ~ Michelle
Jeff ~ plays ~ piano

Jeff ~ attended ~ TED

Nick ~ attended ~ TED
Nick ~ lives in ~ New York
Nick ~ graduated from ~ NYU

In this collection of data, Jeff appears in the greatest number of triples. Another way of phrasing this is that the Jeff node has the highest connectivity. Connectivity of a node is an important statistic in social network analysis, and most network visualizations are designed in ways that place special emphahsis on nodes with the highest connectvity. These visualizations are useful if the user has question mostly related to connectivity, but they often leave litle room to meaningfully express more than that single characteristic. This effect becomes increasingly acute and exaggerated in large networks. Such designs suggest that connectivity is the most significant aspect of the data.

Tripledex always visualizes the total connectivity for each individual node, but it is designed primarily to emphasize the strength of the relationships between nodes.

Using the samples of triples above as a data set, consider this: what if Jonathan is the user and he wants to know how to get an invitation to the TED Conference? Even though Jeff attened the TED Conference, Nick is the node that Jonathan might want to contact. In most visualizaitons Jeff's higher connectivity would mean his node is portrayed in ways that suggest he is more relevant than Nick. Also keep in mind that it is not only that Nick attended the TED Conference that is significant. Jonathan and Nick also both live in New York and attended NYU, so even though Jeff also attended TED, Nick and Jonathan still have more relationships in common. The Jonathan and Nick nodes have a higher affinity for one another.

Affinity is how items are ordered in Tripledex. By default, nodes with the greatest affinity are placed at the top of the visual hierarchy.

The first clip shows the basic environment after a subject is entered into the search box. The first item to load is a list on the left of all the entities connected to that subject. A graph of the same data builds on the right with the subject in the middle and all the entities from the list in an ellipse around that subject. On each line connecting the subject and entities is at least one circle, one for each shared relationship. Mousing over the relationship circle (a.k.a. "bead") will reveal its specifics. The more beads, the higher the affinity. Those items with highest affinity are to the left.

[CLIP 1]

A small arrow appears beneath each of the entities. Clicking this arrow opens a panel with a list of all the items connected to that entity. All of these items are one degree away from the original subject on the graph. From inside that panel, users can select to either make that entity the new subject in the middle top of the graph, or they can select an item from the list in the panel and make it the new subject. In either case, a new graph is drawn (with new, relevant entities, of course).

[CLIP 2]

When searching on former O'Reilly Editor, Rael Dornfest, it's easy to see affinity ordering at work. The number of beads become almost abacus like.

[CLIP 3]

In some instances, the affinity values are much higher. In these cases, it is possible for the user to hide the list so they can expand the graph.

[CLIP 4]

Users can scroll the graph to see other entities that have the same relationship type to the subject node. Even just clicking inside the track that holds the scroll bar will reposition the nodes (sliding the graph). Also, results are returned in groups of 50. Subsequent results can be linked to at the bottom of the graph. These groupings of 50 can also be scrolled.

[CLIP 5]

Because instances of relationships often appear multiple times across a graph, it is helpful to be able to re-order the graph with those relationships prioritized (ordered at the beginning of the graph). In these cases, affinity becomes the secondary criteria for order.

[CLIP 6]

It is also helpful to gain some sense of how frequent a relationship occurs across the entire graph of 50 nodes. With this tool, the user can see and measure how often and where a relationship appears. On this panel shown in the clip below, instances of colored dots indicate a presence of that relationship across the entire set of 50 nodes. The gray dots mean there is no instance of that relationship between the subject and that node. This tool allows users to look at larger patterns.

This device also allows users to reposition the graph so they can navigate, in an informed way, based on relationships as well as by entity.

[CLIP 7]

C.I.A. World Factbook Data Re: Middle East (Information Recast: A Flexible Matrix)
This project is a new method for manipulating a collection of multifaceted data in a single visual environment where every drag of the mouse invites fresh analysis. This tool is something different from pie charts and bar graphs, static graphics that argue specific points. This tool provides an opportunity to interface with data for discovery and rediscovery of information and ideas. Please feel free to view the demo and use the device.

The data brought together for use in this version of the tool comes largely from the 2005 CIA World Factbook, but there are a variety of qualitative analyses expressed in the visualizations as well. These qualitative analyses come from a variety of sources: the U.S. Joint Forces Command Report on Iraq issued in February of this year, the summary of that report issued by the Council on Foreign Relations, and Population Action International\'s Report on Security Demographics, which addresses population and civil conflict.

Quantitative data is stored topic by topic and a few qualitative analyses are coded to express themselves animation. Users begin by clicking a topic from the list on the right and dragging it toward the center of the screen. The countries then arrange themselves between that topic and an origin, the dark circle you see alone on the screen at the beginning. Each country aligns itself along the new axis according to its statistical value corresponding to that topic. For example, if the topic is population and the country has the highest population of all countries on the screen, that country will align itself closest to the topic and the actual data value will appear on the screen.

As new topics are dragged into the active space and moved around, and new visuals created, the user has an opportunity to determine whether what they see advances their argument or introduces a new idea. Note: the origin is also movable. Copyright 2006