<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Luke Loeffler &#187; visualization</title>
	<atom:link href="http://lukeloeffler.com/tag/visualization/feed/" rel="self" type="application/rss+xml" />
	<link>http://lukeloeffler.com</link>
	<description></description>
	<lastBuildDate>Mon, 30 Jan 2012 19:47:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Visualizations for new Display</title>
		<link>http://lukeloeffler.com/2010/fiberoptic-visualizations/</link>
		<comments>http://lukeloeffler.com/2010/fiberoptic-visualizations/#comments</comments>
		<pubDate>Fri, 08 Jan 2010 21:22:38 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[puredata]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=604</guid>
		<description><![CDATA[Over the last couple months I&#8217;ve had the chance to develop a series of &#8220;paintings&#8221; for the fiberoptic tapestry, a new display system developed by artists Ligorano/Reese. It is essentially a hand-woven canvas of optic fibers, each illuminated by an electronically-controlled LED. The result is incredibly beautiful and expressive, producing a painterly effect. I was [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/12/IMG_1463.JPG"><img class="alignleft size-medium wp-image-608" style="padding-right: .5em" title="IMG_1463" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/12/IMG_1463-360x249.jpg" alt="IMG_1463" width="360" height="249" /></a>Over the last couple months I&#8217;ve had the chance to develop a series of &#8220;paintings&#8221; for the <em>fiberoptic tapestry</em>, a new display system developed by artists <a href="http://ligoranoreese.net">Ligorano/Reese</a>. It is essentially a hand-woven canvas of optic fibers, each illuminated by an electronically-controlled LED. The result is incredibly beautiful and expressive, producing a painterly effect. I was mesmerized by the gently-glowing canvases the first time I saw them and was very excited to get the chance to create content for them.</p>
<p>My work has been developing visualizations that utilize the new physical display in different ways. The first visualizes air traffic over four major airports in the US, drawing moving lines to indicate aircraft taking off and landing. The second, entitled <em>Order/Disorder</em>, displayed below aggregates a number of sources for natural disaster information and draws the disasters as &#8220;tears in the fabric&#8221; of the world. Lastly, I am working to create software that reacts to the environment and responds by flashing a series of animations developed by Marshall Reese.</p>
<p>A program in Processing communicates with the hardware and serves as a hub accepting drawing commands from other software via OSC. A number of scripts in Python perform data aggregation, scraping, parsing and animation for the flight tracker. A patch in Pd performs sound analysis and drives the canvases through OSC.</p>
<p><object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="480" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="autoplay" value="false" /><param name="src" value="http://lukeloeffler.com/wordpress/wp-content/uploads/2010/01/order_disorder.mov" /><embed type="video/quicktime" width="640" height="480" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2010/01/order_disorder.mov" autoplay="false"></embed></object></p>
<p><em>&#8220;Order/Disorder</em> is a software visualization of destructive and restorative forces in the world. The software runs on an electronically-controlled tapestry of woven fiberoptic threads created by New York-based artists Ligorano/Reese. Two computer programs, named order and disorder, modify the tapestry throughout the day in response to natural and man-caused events such as earthquakes, biohazards, and aircraft accidents. Order seeks to weave a rainbow-gradated pattern representing peace and wholeness while Disorder seeks to destroy and unravel the tapestry by &#8220;tearing&#8221; the fabric and weaving in aberrant threads.&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2010/fiberoptic-visualizations/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
<enclosure url="http://lukeloeffler.com/wordpress/wp-content/uploads/2010/01/order_disorder.mov" length="6832221" type="video/quicktime" />
		</item>
		<item>
		<title>Visualizing Discussion</title>
		<link>http://lukeloeffler.com/2009/visualizing-discussion/</link>
		<comments>http://lukeloeffler.com/2009/visualizing-discussion/#comments</comments>
		<pubDate>Sat, 10 Oct 2009 00:05:31 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[flare]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=394</guid>
		<description><![CDATA[An animation visualizing four groups discussing a variety of topics over the course of the evening.]]></description>
			<content:encoded><![CDATA[<p>I just wrapped up work on a visualization for the <a href="http://thought-processor.com/lastsupper/">2009 Last Supper Festival</a>. The work visualized a series of conversations during a <a href="http://www.goodmeet.org/SaltMeans_Documentation.html">symposium</a> on the topic <em>Identifying Our Means</em>.  After three short presentations, four groups were formed to discuss a number of topics, periodically rotating the group members from one table to the next. At each table was a note taker who recorded as close to verbatim who was saying what and when, with the help of an automatically time-stamping spreadsheet.</p>
<p>Once the data was collected, a number of scripts were written in Python to extract, convert, clean, and export the data in addition to performing some basic analysis. Finally, I used the Prefuse <a href="http://flare.prefuse.org">Flare</a> library to create an animation at 40x real time of the interaction between people and key topics. Below is a still frame from the animation.  Click to load the animation.<br />
<a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/09/vis_screenshot.png"><img class="alignleft size-large wp-image-397" title="vis_screenshot" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/09/vis_screenshot-800x745.png" alt="vis_screenshot" width="800" height="745" /></a></p>
<p>Special thanks to David Friedlander, Chris Kennedy, Stephanie Nikolopoulos, and Reid Rogers for collecting the data (taking notes) during the event!</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/visualizing-discussion/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Making a Stacked Area Chart With Processing</title>
		<link>http://lukeloeffler.com/2009/stacked_area_chart/</link>
		<comments>http://lukeloeffler.com/2009/stacked_area_chart/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 06:37:25 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=370</guid>
		<description><![CDATA[In order to visualize multiple variables in a single time series, a stacked area (sometimes called a &#8220;stream&#8221;) chart is often useful. I am currently doing research for an upcoming visualization that will trace the development of ideas through a conversation. Unable to find processing code to create an area chart, I decided to write [...]]]></description>
			<content:encoded><![CDATA[<p>In order to visualize multiple variables in a single time series, a stacked area (sometimes called a &#8220;stream&#8221;) chart is often useful. I am currently doing research for an upcoming visualization that will trace the development of ideas through a conversation. Unable to find <a href="http://processing.org">processing</a> code to create an area chart, I decided to write my own. I imagine if I looked, there is something out there, but I also wanted something I could completely control to change the appearance of. Hopefully you will find <a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/river.pde">the source</a> useful in a project of your own.  The image below is an example of the output from the code.</p>
<p><a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/river1.png"><img style="border: 0px initial initial;" title="river1" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/river1-360x155.png" alt="river1" width="360" height="155" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/stacked_area_chart/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Color of Rhyme</title>
		<link>http://lukeloeffler.com/2009/the-color-of-rhyme/</link>
		<comments>http://lukeloeffler.com/2009/the-color-of-rhyme/#comments</comments>
		<pubDate>Sat, 08 Aug 2009 02:42:57 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[language]]></category>
		<category><![CDATA[linguistics]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=344</guid>
		<description><![CDATA[Over the last few weeks I&#8217;ve been exploring language and words and how to deal with them algorithmically. Lately I&#8217;ve been thinking about ways to visualize various aspects of language, and one of the first that came to mind was the idea of representing the sound of words with color. I am using the Carnegie [...]]]></description>
			<content:encoded><![CDATA[<p>Over the last few weeks I&#8217;ve been exploring language and words and how to deal with them algorithmically. Lately I&#8217;ve been thinking about ways to visualize various aspects of language, and one of the first that came to mind was the idea of representing the sound of words with color.</p>
<p>I am using the Carnegie Mellon Pronouncing Dictionary to encode each word. The CMUPD provides a list of 39 phonemes, the unique sounds that comprise spoken English. These are as follows:</p>
<div style="height: 150px; width: 300px; overflow-x: hidden; overflow-y: scroll;">
<pre>Phoneme Example Translation
AA	odd     AA D
AE	at	AE T
AH	hut	HH AH T
AO	ought	AO T
AW	cow	K AW
AY	hide	HH AY D
B 	be	B IY
CH	cheese	CH IY Z
D 	dee	D IY
DH	thee	DH IY
EH	Ed	EH D
ER	hurt	HH ER T
EY	ate	EY T
F 	fee	F IY
G 	green	G R IY N
HH	he	HH IY
IH	it	IH T
IY	eat	IY T
JH	gee	JH IY
K 	key	K IY
L 	lee	L IY
M 	me	M IY
N 	knee	N IY
NG	ping	P IH NG
OW	oat	OW T
OY	toy	T OY
P 	pee	P IY
R 	read	R IY D
S 	sea	S IY
SH	she	SH IY
T 	tea	T IY
TH	theta	TH EY T AH
UH	hood	HH UH D
UW	two	T UW
V 	vee	V IY
W 	we	W IY
Y 	yield	Y IY L D
Z 	zee	Z IY
ZH	seizure	S IY ZH ER</pre>
</div>
<p>Initially I gave each phoneme a different hue (from 1-360 degrees) by spreading each phoneme out on the color wheel equidistantly. Using this mapping, the phrase &#8220;Who knew sniffing glue could give you the flu?&#8221; translates to the following image: <a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/phrase1.png"><img class="alignnone size-full wp-image-345" title="phrase1" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/phrase1.png" alt="phrase1" width="215" height="23" /></a>.  You can clearly see the phoneme UW in magenta appearing at the end of each word.  Unfortunately, there is a lot of visual noise introduced by displaying all the other phonemes.</p>
<p>Realizing not all phonemes are going to be equally represented in the corpus, I decided to find the distribution of each. The sound AH (the &#8220;uhh&#8221; in the word &#8220;hut&#8221;) is the  most commonly occurring, accounting for nearly 10% of phonemes (this may be different if the most common 10% of words are analyzed, haven&#8217;t looked). This also happens to answer the question I asked my linguistics studies cousin at Christmas dinner some years back after doing imitations of other languages: &#8220;So, what does a non-English speaker hear when an American speaks?&#8221; It sounds like the answer may be &#8220;uhh&#8230; duh.. buh&#8230; fuh.&#8221;</p>
<div style="height: 150px; width: 300px; overflow-x: hidden; overflow-y: scroll;">
<pre>Phon.   Count   Prob.
AH	70564	0.0938934151927
N	53577	0.0712902826622
L	44148	0.0587439274124
S	43349	0.0576807671786
T	41698	0.0554839241923
R	40794	0.0542810495348
K	38174	0.0507948420096
IH	33779	0.0449467954168
IY	30957	0.0411918039527
D	28491	0.0379105109157
M	26330	0.0350350550142
ER	25871	0.0344243033905
EH	24564	0.0326851914686
Z	23955	0.0318748478111
AA	22175	0.0295063556757
AE	19151	0.0254825802726
B	18943	0.0252058126523
P	17305	0.0230262676423
OW	17147	0.0228160306999
G	12248	0.0162973548733
F	12147	0.0161629629038
EY	11851	0.0157691012903
AO	10059	0.0133846417922
AY	9838	0.0130905761956
V	9349	0.0124399061651
NG	8692	0.0115656930567
UW	8579	0.0114153337245
HH	8439	0.0112290478262
W	7737	0.0102949571077
SH	7730	0.0102856428128
JH	5461	0.00726648064689
Y	4392	0.00584405475209
CH	4378	0.00582542616226
AW	2932	0.00390135895563
TH	2597	0.00345560341329
UH	2021	0.00268917000318
OY	1124	0.00149560964056
DH	504	0.000670629233846
ZH	482	0.000641355735543</pre>
</div>
<p>The next step is to take the frequency distribution into account&#8230; Before diving any farther into palette selection, I created a simple <a href="http://lukeloeffler.com/labs/WordDna.html">test application</a> which you may play with (though be warned, it may be broken and may be an older version).</p>
<p>In this screen shot, syllable stress was taken into account as I experiment with the pre-attentive characteristic of height to aid visualization.<br />
<a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/Safari.png"><img src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/Safari.png" alt="test with stress" title="test with stress" width="423" height="149" class="alignnone size-full wp-image-350" /></a></p>
<p>In the following version the previous phrase was repeated with a palette restricted to vowels only and colors assigned according to probability. Phonemes with a higher rate of occurrence received hues that were more distinct from others.<br />
<a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/Safari1.png"><img src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/08/Safari1.png" alt="palette restriction" title="palette restriction" width="413" height="40" class="alignnone size-full wp-image-353" /></a></p>
<p>This change appears to have improved the legibility somewhat. More experimentation will be necessary.  I suspect this linear format will be a failed experiment. It seems there is little improvement in recognition of rhyme, as the viewer must use working memory to hold what amounts to merely a new representation of sound rather than use pre-attentive factors to quickly match sounds together.</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/the-color-of-rhyme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Seven Minutes</title>
		<link>http://lukeloeffler.com/2009/respiration/</link>
		<comments>http://lukeloeffler.com/2009/respiration/#comments</comments>
		<pubDate>Tue, 14 Jul 2009 00:04:18 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[sensors]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=272</guid>
		<description><![CDATA[A drawing representing respiration patterns.]]></description>
			<content:encoded><![CDATA[<p><a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/07/3651620104_f98a98156a_o1.jpg"><img class="alignnone size-full wp-image-275" title="respiration" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/07/3651620104_f98a98156a_o1.jpg" alt="respiration" width="716" height="95" /></a></p>
<p>This image represents my breathing pattern for seven minutes. By reading the motion sensor in my laptop, I was able to plot the rise and fall of my chest. Each circle represents five seconds of data. This was an experiment to see whether the sensor was sensitive enough to detect respiration.</p>
<p>If you would like to experiment with using the sudden motion sensor (SMS) in an Apple MacBook (or MacBook Pro), my <a href="http://processing.org">Processing</a> source code <a href="http://lukeloeffler.com/wordpress/wp-content/uploads/2009/07/sms.pde">is provided here</a>. Please note that you must download the sms library, available from the Processing website. Commented out is code to turn the laptop into an etch-a-sketch, where you draw by tilting the laptop in various directions.</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2009/respiration/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Falling Notes</title>
		<link>http://lukeloeffler.com/2008/falling-notes/</link>
		<comments>http://lukeloeffler.com/2008/falling-notes/#comments</comments>
		<pubDate>Wed, 02 Jul 2008 21:27:22 +0000</pubDate>
		<dc:creator>luke</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[interactive]]></category>
		<category><![CDATA[music]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://lukeloeffler.com/?p=87</guid>
		<description><![CDATA[An interactive music visualization requiring the performer to consider musical and aesthetic outcomes simultaneously.]]></description>
			<content:encoded><![CDATA[<p><iframe scrolling="no" src="http://lukeloeffler.com/wordpress/wp-content/uploads/2008/07/piano.html" width=129 height=401 style="border: none; overflow-x: hidden; overflow-y: hidden; scroll-x:none; scroll-y: none; padding: 1em 1em 0 0; float: left;"></p>
<p>Your Browser does not support iframes, so you cannot view the embedded movie. You may still view a <a href="http://www.flickr.com/photos/ukle/2475548679/in/set-72157604948741164/">version</a> of the movie without sound.</p>
<p></iframe></p>
<p>In this interactive visualization, a musician watches the screen while performing on a keyboard. As notes are played, &#8216;raindrops&#8217; begin to fall. Louder notes fall faster than softer ones and continue to accelerate as the note is sustained. Eventually, notes will blacken if they have been falling for an extended period, and will slowly dissipate unless cleared away by fresh rain from above.</p>
<p>The real-time feedback causes the musician to alter what is being played in order to generate particular audio and visual outcomes simultaneously.</p>
<p>Music in this demo is <em><a href="http://lukeloeffler.com/2009/musical-meanderings/">Final Transmission</a></em> by Luke Loeffler</p>
]]></content:encoded>
			<wfw:commentRss>http://lukeloeffler.com/2008/falling-notes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

