Filter

In my case I don’t really need all data of the gradient field pixel by pixel since I’m just gonna draw the contour lines for different levels of odor density. Hence I extracted the data only while the odor changes significantly from one level to another and optimized the gradient data file from 5.8MB to 28KB. It not only helps shorten the load time, and dramatically decreases the lag in the draw loop.

Another performance issue found in the iterations was that while the text labels were drawn in SCREEN text mode, it was REALLY slow, taking almost ten times of the default MODEL mode. It’s definitely not acceptable in a visualization aiming for interaction (with a lot of redrawing).

Represent

I always wish to present the expected paths of larvae and distinct them from an incorrect navigation. Also I suppose in the data given, all larva steps are sampled on a same interval of time (since they were captured by a camera, maybe controlled by a time lapse program?), then I must present the time factor too in the static image. So here’s what I get:

• Each path is marked clearly with label on both start and end all the time;
• Paths are grouped in similar colors if they belong to same types of larvae (unilateral or bilateral);
• The shape of the ending label changes when the larva stops moving or “quits”;
• The size of the ending label increases through time, so that the user can tell which larva has travelled for longer time, and which one gets to the destination earlier;
• The path goes thicker while it’s moving towards the odor center, and becomes thinner if the larva is moving away from the expected destination;

Refine and Interact

For both debugging and presentation need, I decide to group the paths drawn on the screen in 10, in each one of them one unilateral larva and one bilateral.

• Keyboard shortcut 1 – 9 are used to display different amount of groups on screen, 0 key will show them all;

The user should also have the capability of exploring through time, that’s why a step slider is provided in all view. The user can always drag the slider to a certain point of time to observe the larvae behavior (statistically).

• Keyboard shortcut + and – are used to navigate through time;

One last thing is debug information for the developer (me!). I print out the actual and expected direction of each step for debugging in the debug mode (keyboard shorcut d). In fact it’s visually more beautiful than usual.

There’re also weird thing that I cannot explain throught the data. What’s the real exiting criteria of the larvae? Apparently some of them exit by hitting the wall (orange A,D, blue C), others might be exitting by getting to destination, orange F might triggered a time out, but what’s happening with orange B and blue C? Blue C is even out of the field!

The jpeg screenshot are terribly poor in quality, play with the applet directly via this link. It should be super fast!

What’s next?

As I said this is not a complete work since I just don’t have enough time to finish it. The zipcode exercise was really helpful though in methodology aspect. I didn’t find a good way to feature the integrator class in this smell exercise. But there’re some other points that I wish to improve:

• legends and instructions to tell difference between colors, shapes and strokes;
• data mining: statistic data on different type of groups. Possible axises: quit time (on success/failure), quit steps (on success/failure), etc;
• visual effect: not only dymamic effects for interaction, this data could be rendered as a nice visual art work as well. In that sense more data could be used without compromising to interaction needs;
• what else?

2 Paths (unilateral and bilateral olfactory).

In the experiment actually 4 different groups of larvae were used.

a) Or83b^–/– mutant, non-functional in detecting the odor used in the experiment;

b) unilateral left (only left olfactory organ is functioning);

c) unilateral right;

d) full functional wild type.

We rule out the case a and combine b & c together just to simplify the visualization to support the conclusion from the experiment. This is where we start the “illusion” by trimming down the source data from the experiment. However, some of the features should not be ignored in the different behaviors:

The Difference

First of all, the two different types of behaviors should be splitted on the final visualization. The paths should remain looking like a path, or course, to avoid unnecessary confusion, but they should be clearly marked with (at least) 2 different colors, or placed in different levels to differentiate. The sample image is the North American Subways Map from http://www.radicalcartography.net/?subways. The path could even be assigned a non-opaque alpha value so that we could later see the accumulation of color for a certain type of larva. This would also be discussed later.

The Route

The navigation of the larva could be told by its movement, and we need to keep track of this route.

The starting and ending point should be indicated in the visualization. They should be either marked clearly on a static image, or be presented in a video through time.

I found the work from an experiment in which different cognitive styles of Chinese, Koreans and Americans were compared. In the report, Eye Tracking Data Visualization (pic1, pic2, pic3) were presented to indicate user attention to a certain web page through time. Different colors are used for different period of browsing time. This technique could also be applied to the larva navigation, for instance, the route starts with a lighter version of the base color (which indicates its type) and throughout its journey the routh grows darker. Or, in the simplest form, a small triangle in the front indicating the direction.

The Weighed

I would also like to emphasize on the “expected” decision of the larva. If a step it took was expected (towards the odor), this step should be weighed more than an incorrect step (away from the odor). The “correctness” of a step could be compared by the angle between current larva direction (by calculating the previous and current position) and the vector of that location (which points to the stronger odor source). A weighed “correct” step could be thicker in shape, or having different texture on it. Sample image from TeleGeography by Timothy J. Stronge.

The Group

The group average behavior of a certain type of larvae let us see beyond individual exceptions, so that I think a heatmap could be a good idea to present that. This technique is also used in Dr. Vosshall’s paper. Due to the fact that the larvae location was captured rather low-res, the heatmap was pixelated. A 3D histogram over the surface might also help, but I will try to look for more simple solution in 2D first. If the path was at first place rendered as a semi-transparent line, we might be able to get a self-accumulated heatmap automatically at the end of whole rendering.

Odor (particle and odorant gradients)

The visualization of the odor is mostly about the intensity. In 3D the visual effect could be easily achieved by placing more particles in certain space to suggest higher density. In 2D we usually indicate the intensity by changing opacity and lightness of the color. In this case, the stronger the odor is, the thicker and brighter the color should be. That is still a lazy solution though. I’m actually pretty much into the idea (in the paper) of putting vectors everywhere to point out where a stonger odor is. And the vector could combine with the idea to give a visual feedback while the larva travels away from the expected direction.

I thought of using the lifted plane to indicate a higher density of odor, but that would be too much like a metaphor for mountain, which does not make much sense in this case. Larvae pursuing height? So … better keep the old fashion in this case.

Larvae

The visualization given in the paper might actually be restricting the creativity while I think about this experiment. I felt pleased when I realized that I could throw away the odor field and think about only the larvae. I thought too much about the experiment itself so that I previously focused mostly on the path and almost abstracted the larva to a single point myself. This is not necessary the case.

I saw this on the new york times website while I was looking around and it was definitely a shock. It gave me an idea that the larvae could also be visualized in a statistical way. They could be categorized by success/failure evaluation of pursuing the odor, or by the steps they took before reaching the expected destination.

Define space of experiment

In my personal interest I would like to keep the space 2D, since the sampled data were no more than 2D and I feel like keep that simplicity. Even 3D might be spectacular for user interaction but I don’t see much point here to introduce the 3D space for this experiment, unless in the sketch next week I add multi-layer information so that I have to introduce 3D. The visualization for the odor substances filling in the space was already covered above, and they would take up all spaces of experiment. So the point here is to define a clear boundary of the experiment area, and express the idea that whenever the larva touches the boundary its game is over. Simple geometry shapes or difference in color would do it fine.

Here is a very interesting visualization work for football match done in 1986. More at http://www.susken-rosenthal.de/fussballbilder/indexen.html.

One visualization you like that effectively communicates its subject matter

Strife and Power in the New Middle East. 2006 by New York Times

Let’s just look at the first illustration. I believe that most people including me would not be one hundred percent clear what’s really going on in the middle east. Different countries, armies, ethnic groups, religious and economic issues. And this illustration, no matter dated or not (not surprising if it’s dated since it’s made in 2006), provides a nice and clear big picture of the middle east.

Its amazing simplicity is shown in the legends: red weighed stripes for conflicts, circles for groups, oil tower icon for oil control. Those symbols are cast on the simplified map of middle east, on which you could basically tell the outline of Europe, Africa and Asia. The circles representing groups are so cleverly used that so many different features are concluded in the simple symbol: the color is used to differentiate ethnic group, the size refers to the population, and the thick outline means government background.

The main purpose of this visualization is to illustrate relationships and show conflicts, as the title suggests. That’s why the conflicts (which are represented in red stripes) are emphasized as the center of the illustration, and also in a most noticable color. The width of the stripe is a nice metaphor for the severeness of the conflict. The secondary conflicts are marked in much thinner stripes, which is also quite self-explained.

I would also like to talk a lot more simply because there are so many wonderful visualization projects out there, yet maybe next time. Among them my favourate is “We Feel Fine“. I have to post something about it here now that I’m talking about viz project I “like”. It’s an amazing idea combined with fantastic implementation, by crawling over the web, collecting people’s “feeling”, and showcase them in a dramatic way. Go visit now if you haven’t done so!

One visualization that is about a sense

I tried to find one for each sense, but didn’t make it.

Sound: The Shape of Song, Pop Sketch Series (actual piece link broken, use visualcomplexity post instead), Digital Acoustic Cartography,

Smell: New York Smell Map (but the actual viz work seems broken, maybe it’s just me), London Air Pollution in 3D (not sure whether it’s about smell?)

Vision: Eyescapes, A Working Brain Model, A Cross-Cultural Comparative Study of Users’ Perceptions of a Webpage: With a Focus on the Cognitive Styles of Chinese, Koreans and Americans , Millennium Simulation, 

Touch and Taste: no luck

Just for fun: FM RADIO MAP (mapping radio station according to geo location and embed the radio to the viz work), Cascade on Wheels (visualizing traffic and using noise as metaphor for traffic).