Giladon-line » design

Aerogel Installation at TEDActive

gilgul — Sat, 20 Feb 2010 04:37:47 +0000

I was fortunate to be invited this year as one of the contributing artists at TEDActive. This is the simulcast event that happens in Palm Springs at the same time that the main TED event takes place in Long Beach. The organizers frame it not as “TED jr.” but rather a more intimate version of TED; in essence, what it used to be like before it became a 1500 person event.

Ironically enough, Bing sponsored a really cool lounge which included a number of interactive art pieces. This is were Dan Goods and I installed a variation the Aerogel installation. For TEDActive, we slightly altered its interactivity and the projected material:

Aerogel is a solid made up of 99.8% air and 0.2% of a smoky form of silicon, hence its other name: ’solid smoke’. While it is easily breakable, the material is super light and a fantastic heat insulator. Throughout the week, Dan would let people hold a piece of Aerogel on their hand while directing a blow-torch at it. When projected upon, it captures light in a stunning way:

NASA uses aerogel to capture dust particles in space. These particles vaporize on impact with solids and pass through gases, however can be trapped within the aerogel. Our installation dealt with this notion of capturing that which difficult to hold or grasp. As the conference progressed, the ideas that were raised and discussed during the talks were captured and projected on the aerogel pieces. At different times, a variety of topic would be projected within the aerogel pieces. When left by itself, the projections morphed between movement and colors. But as a person would move their hands in front of the installation, some of the most recent messages posted on Twitter about TED or TEDActive would explode within the projected space.

Here’s a video demonstrating the material’s amazing capability to capture light:

Here’s another video showing Dan interacting with the piece:

Seeing a Twitter #Hashtag Spread

gilgul — Wed, 20 Jan 2010 20:51:05 +0000

#CheeringForTheYankeesIsLike is a hashtag created by @mattsly the morning of October 26th. He submitted the following snarky message – ‘Go Phillies. #CheeringForTheYankeesIsLike hoping investment bankers get really huge bonuses of at least 8 figures‘ – hoping to entertain his friends, and possibly get others to participate. Matt had 182 followers at the time, not sizeable by any means on Twitter. Little did he expect that some 9 hours later, 271 different users, most of whom have no connection to him whatsoever, would participate, posting around 500 messages in total.

How did this happen and what prompted this message to spread?

#CheeringForTheYankeesIsLike

About an hour after Matt sent out his first message, one of his followers, @lizzieohreally, wrote the following message ‘@jaketapper? @abcdude? …Hoping someone w/ more Twitter than I can help popularize #CheeringForTheYankeesIsLike (via @mattsly)‘. Lizzie clearly understood that in order to get many others to play, she would have to get someone with a large set of followers to participate. Lizzie had only around 500 followers at the time, so posted this message in an attempt to seek @jaketapper or @abcdude’s attention.

Sure thing, some twenty minutes later, @abcdude see’s the message and adds his own variation to the meme: ‘#cheeringfortheyankeesislike pulling for Regina George in “Mean Girls.”‘ He enjoys it so much that he promptly posts another message and attaches the hashtag. @abcdude is a new york based correspondent for ABC news. He dubs himself a RedSox fan and a cosmic power broker. Not as cosmic as Lizzie had hoped, but still, he has some 7,000 followers, which could certainly help give the meme some traction. We see a small spike after @abcdude’s participation, and by now, some 3 hours after Matt sent the original message, there have been 34 different messages posted with this unique hashtag.

But it wasn’t until @jaketapper joined in that the conversation really took off. The hashtag came to Jake’s attention after @DetourJazz, whom he follows, participated. Jake reacted by posting: ’RT @DetourJazz: #cheeringfortheyankeesislike rooting for “Craterface” in Grease to beat Danny (via @Laura_Martin)’. He then added a new message that he posted to his followers. Jake is a senior White House correspondent for ABC news with over 30,000 followers. Before he took part in this meme, new posts appeared at a frequency of one every 5 minutes. Immediately after he joined, we see a sharp rise in participation, with multiple messages from a variety of users every minute.

Seeing it Spread

1. Graphing the Network – Every user who participated in the meme is represented by a gray circle (Matt, whom first started the meme, is shown in yellow). Edges represents the person who most likely influenced the other to first participate.

2. Seeing the Flow – in this applet, a user is represented by their twitter icon. As the timeline moves forward, each profile lights up when they post a new message with the hashtag. Tthe moment that @jaketapper chose to participate is evident – there’s a clear, sudden spike in participation after his profile picture lights up.

3. Seeing the distance – the following applet highlights the total social distance that this hashtag traveled between users. Each user is represented by a circle, the more influence a user has, the larger their circle is drawn. Edges in this example represent the social ties – when there’s a follower/friend relationship between two users, a line is placed between their representation on the screen. The first column includes only Matt who first used the hashtag. The second row consists of only those people he directly influenced to participate (his followers). While there are a total of 9 columns, it is crystal clear that the most important phase happened in the second and third column, when a core cluster of users chose to participate, and a mini tipping point was reached.

Parsing the Data

#CheeringForTheYankeesIsLike lasted for a total of 9 hours that day, activated 271 different users and included around 500 messages in total. From looking at this meme, it is clear that on Twitter, there’s great advantage to having many followers if one intends to spread a message. It is also clear that having the right followers is key. If it were not for @lizzieohreally who knew to actively pass the message onwards to heavy Twitter users, the meme would never have spread out the way it did. In order to come to these conclusions it was necessary for me to look at social ties in addition to the semantics of the messages posted.

I used the Twitter API to discover the follower/friend relationships between all users who participated in this meme. This is extremely important data, especially when modeling the flow of participation and influence within this hashtag. For example, lets look at a simple case where user B follows user A. If user A first participates and is followed by user B participating, user A is rewarded some number of influence points – this is assuming user B saw the hashtag posted by user A, and decided to participate. Additionally, if a user is retweeted or ‘@’ messaged they are rewarded some number of influence points. Real life situations can easily become complicated, as user B might also be following user C, who participated in the meme as well. Now how do we know if user B was influenced by user A or user C? Hard to tell, but we can build an influence model that takes these situations into account, which is exactly what I did.

Translating the semantics and social ties from the dataset into a visual language that made sense was key to helping me understand this hashtag experiment. I am a big fan of visualization as a means to parse large datasets, however dealing with social, implicit data is tricky, and extremely challenging to represent visually. But when done right, these representations can shine a whole new light and hopefully help us better understand some of the dynamics at play.

Twitter Visualization: MTV VMA Tweet Tracker

gilgul — Tue, 15 Sep 2009 15:26:34 +0000

New Twitter visualization of the MTV video music awards by Stamen design. I enjoy using the well-designed interface for “re-experiencing” the series of events as they evolved that evening. I like the simplicity of the timeline at the bottom, and just how easy it is to navigate between times. What I also really like is the sparkline-esque graph showing the person’s popularity throughout the evening.

What I’d like to see is a comparison of multiple people at the same time. I’d also like to minimize the timeline so that i can see the whole evening at a time, rather than have to scroll horizontally. I don’t like the aesthetic of circular profiles over a black background. The circular border has too much contrast – some alpha blurring would’ve done the trick nicely. Whats definitely missing most is the multiple channel view, especially now that people aren’t talking as much about the event. In any case, nice to see MTV investing in a Twitter viz. (click below to try it out)

Flickr Clock

Mon, 09 Mar 2009 19:12:14 +0000

There’s something really wonderful about using the flickr clock interface to browse through people’s moments from around the world. The clock displays only video content and lets you lean back and just click to view another short clip which someone uploaded somewhere around the world.

flickr clock

I love the horizontal timeline below the image slices and I think the general browsing experience is well done. Its always an interesting challenge lining up events horizontally on one level. For example, when browsing through this clock, I first encounter a clip from the San Francisco Pillow Fight. However, when I click on the arrow I am shown a cat sitting by a windowsill. All these events happen at the same time, and are as important for the person who placed them on the clock.

flickr clock timeline

Applications like these make me wonder how we will be consuming news in the future. Will we have a super-set of timelines streaming real-time video people are taking from events around the world? How easy will it be to switch from my personal channel (i.e. my cat on the windowsill) to my relevant events (for example places I’ve been to, people I follow or more general newsworthy events).

[tags] visualization, timeline, clock, flickr,video,news,events,pnn[/tags]

Making round DIVs

Mon, 22 Sep 2008 21:52:27 +0000

Here’s the image-based method I used to make rounded DIVs. Use the following HTML code along with the CSS properties and .gif files. The results are a lot of fun and look quite good:

[tags]html,code,programming,round,div,css[/tags]

Solid Smoke – my interactive installation in the Swiss Technorama museum

Sun, 14 Sep 2008 22:00:28 +0000

Solid Smoke is an interactive installation I’ve built in collaboration with the Pasadena based artist, Dan Goods, of directedplay. The installation has been recently installed in the the Swiss Technorama science museum.

The installation triggers colored patterns projected onto aerogel, a unique low-density material in which the liquid component of the gel has been replaced with gas. The result is an ultralight semi-transparent material which absorbs light project within it. Leveraging its visually stunning properties, we created a display which changed patterns and lights according to viewers hand movements. By moving her hand next to the piece, a viewer controls the projections and colors.

The installation runs on a mac-mini, using processing + additional java libraries. It analyzes the images bouncing off IR light project from the ground, triggering events only when viewers interact with the piece. The project will be running until July 2009.

Some tests with aerogel below:

[tags] aerogel, interactive, exhibit, installation, technorama, science, museum, switzerland, gilad, lotan, dan, goods [/tags]

Ma’ariv Site Redesign

Tue, 13 May 2008 21:57:42 +0000

Ma’ariv, one of Israel’s most popular newspapers (both print + web), has gone through a comprehensive site re-design. Its about time they changed their horrid color palette (reds and yellows), to a much cleaner set (grays) with a well structured UI, which actually feels somewhat like nytimes.com.

[tags]hebrew,news,web,design,nrg,maariv [/tags]

Visual Delights for Browsing

Sat, 08 Mar 2008 06:39:51 +0000

Whoa. In the past couple of days I’ve discovered fresh web-based visual effects that give a lot of joy:
1) I am a big supporter of Gmail labels and filters. Since it is my main email box, I use it to subscribe group lists, bills, google alerts as well as receiving personal emails. Labels and filters are extremely useful to help sift through all the messages and for sub-queues – one for personal emails, another for this list, a third for my alerts, etc… Several days ago I noticed that gmail added a coloring scheme (this might be old news?) which lets you set labels to colors – this way I can visually browse through my queue and get a sense for whats waiting for me.

2) Netvibes just came out with a completely new design – visually and conceptually. They provide their users with a private page (what I’ve been using for years) to aggregate RSS feeds, as well as their new ‘ginger’ public interface. Finally they are starting to do interesting things with their user-base. So this is my public page, well equipped with my blog feed, my flickr&twitter feeds, my facebook badge and yet another ‘wall’ for you all to scribble on ::groan:: I know, am way over that. They include a followers/activities tab which just might help make this service catch – its extremely useful for your own use when organizing RSS feeds, but can be extremely helpful when this metadata is shared among a social group. Let people organize the data according to their interests => provide a platform for them to share amongst each other => own a “catchy”, highly used service => … make money ?

Don’t know about the last part, but I’m definitely enjoying playing around with the designs:

3) Piclens is a fantastic way to browse through images. Installs as a browser-app. into firefox and allows to creates a horizontal for viewing images from websites. Cool, slick and intuitive interface. This is how my flickr stream looks through the app:

[tags]visual,design,browsing,netvibes,ginger,gmail,piclens[/tags]

visualizing online comment spaces

Mon, 18 Feb 2008 14:19:20 +0000

How do you capture the essence of a conversation online? How can we visualize chats and forums? How can user generated content that usually follows news articles and blog posts take a more substantial role in the online conversation?

I am fascinated by the conversations formed in the comment spaces around articles and blogs. With the current way that comments are displayed as long lists, it is virtually impossible to comprehend the broad range of perspectives. For the past few weeks I’ve been looking at the comment space around articles on the US presidential campaign. The LA Times chose to present the thousands of comments (specifically the 7,972 between September 28th until today!). For this project I chose to use java with processing. The goal is to create a clear narrative/s around the essence of these comments, binding them together on different threads. It is not a simple task, as the comments usually do not relate to one another. Moreover, users submit comments usually under fake names – and when you do not know who exactly is talking, it is extremely difficult to have a conversation. So I chose to concentrate less on the ‘who’ and more on ‘what’: what are people saying about the candidates. Which words are they using more, and how they are choosing to describe the candidates.

playing around with the interface and aesthetics

An inspiration to this project is Ben Rubin and Mark Hansen’s Listening Post – displaying real-time conversations from online chat rooms.

(listening post photos courtesy of fenchurch @ flickr)

More updates and a link to the web-app VERY soon

[tags] visualization, campaign, 2008, primaries [/tags]

Playing with Text

Thu, 31 Jan 2008 00:28:05 +0000

I’ve recently been inspired by some text visualization methods. Of specific interest to me are Edward Tufte’s Sparklines, simple word sized graphics, which allow their users to get the gist of what’s happening with the data without needing to fully read it all. The graphic below is a 13th century manuscript bible with these amazing decorative tendrils. Reminds me of most standard Hebrew bibles which has scribbles signifying musical phrases and tones drawn above and below the words.

I wonder why we’ve lost these decorations and symbols from our text styling. This is slowly coming back with (::cough::) emoticons. I’ve always wanted to have cynical text. That would extremely useful!

Another project, Similar Diversity, is a well-done textual analysis which visualizes words from English translations of Holy scriptures. My favorite of their images is the first one below:

Different colors signify the holy book the word appeared in, while size, obviously, relates to the number of times the word came up. I wish they had chosen more interesting words, though. Its obvious that GOD or LORD would show up most in the scriptures, but how about the word RAPE or WAR? Or even LOVE and HATE? That would be fascinating!

This is an illustration of the relationships between the words. Very stylized, clean design. I like it.

[tags] text, visualization, sparklines, tufte, similar diversity [/tags]