<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" 
      xmlns:thr="http://purl.org/syndication/thread/1.0">
  <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html" />
  <link rel="self" type="application/atom+xml" href="http://www.insideria.com/atom.xml" />
  <id>tag:www.insideria.com,2009://34/tag:www.insideria.com,2008://34.33720-</id>
  <updated>2009-11-16T15:29:15Z</updated>
  <title>Comments for Data Visualization With Processing (http://www.insideria.com/2008/10/data-visualization-with-proces.html)</title>
  <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.21-en</generator>
  <entry>
    <id>tag:www.insideria.com,2008://34.33720</id>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://blogs.oreilly.com/cgi-bin/mt/mt-atom.cgi/weblog/blog_id=34/entry_id=33720" title="Data Visualization With Processing" />
    <published>2008-10-09T02:34:08Z</published>
    <updated>2008-10-14T17:27:34Z</updated>
    <title>Data Visualization With Processing</title>
    <summary>One of the most common themes that I write about on this blog is data visualization, especially with Flex and AIR.   This time I decided to change things up a bit and am exploring data visualization with Processing. </summary>
    <author>
      <name>Andrew Trice</name>
      
    </author>
    
    <category term="Blogs" />
    
    <content type="html" xml:lang="en" xml:base="http://www.insideria.com/">
      <![CDATA[One of the most common themes that I write about on this blog is data visualization, especially with Flex and AIR.   This time I decided to change things up a bit and am exploring data visualization with <a href="http://processing.org/" target="_blank">Processing</a>.   
<br/><br/>
From the <a href="http://processing.org/" target="_blank">Processing</a> web site:<br/><br/>
<blockquote>Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is an alternative to proprietary software tools in the same domain. </blockquote>
I've seen Processing quite a bit in the past, and it has been <a href="http://www.insideria.com/2008/06/obsessingorg-processingjs-for.html" target="_blank">covered here on insideria.com</a>.   Processing is Java based, and from the <a href="http://processing.org/exhibition/index.html" target="_blank">demos</a>, it appears to be quite fast for graphics processing.   You really should check them out to see what it is capable of.
<br/><br/>
<i>Please bear with me... this is my first processing visualization.</i>
<br/><br/>
I decided to put together a simple dynamic line chart to test out the potential of processing for data visualization in RIAs, and things certainly look promising.   This example is a constantly changing line chart (however is completely based on random data).   
<br/><br/>
<div id="content">
			<div id="sketch_081008a_container">

			<!--[if !IE]> -->
				<object classid="java:sketch_081008a.class"
            			type="application/x-java-applet"
            			archive="sketch_081008a.jar"
            			width="400" height="250"
            			standby="Loading Processing software..." >

					<param name="archive" value="http://www.tricedesigns.com/portfolio/processing/intro/sketch_081008a.jar" />

					<param name="mayscript" value="true" />
					<param name="scriptable" value="true" />

					<param name="image" value="http://www.tricedesigns.com/portfolio/processing/intro/loading.gif" />
					<param name="boxmessage" value="Loading Processing software..." />
					<param name="boxbgcolor" value="#FFFFFF" />

					<param name="test_string" value="outer" />
			<!--<![endif]-->

				<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
						codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab"
						width="400" height="250"
						standby="Loading Processing software..."  >

					<param name="code" value="sketch_081008a" />
					<param name="archive" value="http://www.tricedesigns.com/portfolio/processing/intro/sketch_081008a.jar" />

					<param name="mayscript" value="true" />
					<param name="scriptable" value="true" />

					<param name="image" value="http://www.tricedesigns.com/portfolio/processing/intro/loading.gif" />
					<param name="boxmessage" value="Loading Processing software..." />
					<param name="boxbgcolor" value="#FFFFFF" />

					<param name="test_string" value="inner" />

					<p>
						<strong>
							This browser does not have a Java Plug-in.
							<br />
							<a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
								Get the latest Java Plug-in here.
							</a>
						</strong>
					</p>

				</object>

			<!--[if !IE]> -->
				</object>
			<!--<![endif]-->

			</div>
		</div>
<br/><br/>

While the chart itself is still very basic, it performs well, and could easily be extended to include labels, overlays, or interactive elements.  In this example, I am shifting the data on every draw event.   Better yet, the jar file containing this visualization is only 160K.   However Java is required to run any processing application.
<br/><br/>
<strong>First Impressions:</strong>  Data rendering is fast.   I haven't run any benchmarks yet, but things appear to render quickly.   The language is based on Java, so it is familiar, and the instructions used to render shapes on the screen are very easy to work with.   The IDE is basic, however it allows you to rapidly prototype your visualizations.   The only other thing I would ask for there is code completion.
<br/><br/>
Not only was this visualization easy to write, there is very little code involved.  You can check out the full source below.   Additionally, there's a "boat load" of examples that come with the processing IDE to help get you started.
<br/><br/>
Based on what I've read so far, advanced users can import the processing JAR libraries to other IDEs (such as <a href="http://www.eclipse.org/" target="_blank">eclipse</a>), or you can use any Java library in your processing visualizations.
<br/><br/>
I'll be sure to write more here as I explore processing for RIA development.
<br/><br/>
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;">
<code language="perl">
<pre> 
final <span class="category1">int</span> FRAME_RATE = 30;
final <span class="category1">int</span> ARRAY_SIZE = 40;
final <span class="category1">int</span> WIDTH = 400;
final <span class="category1">int</span> HEIGHT = 250;


float[] datum = <span class="category1">new</span> float[ARRAY_SIZE];
  
float x1 = 0;
float y1 = 0;
float x2 = 0;
float y2 = 0;
  
float xIncrement = WIDTH/(ARRAY_SIZE-1);
float value;

<span class="category1">void</span> setup() {
   <span class="category2">size</span>(WIDTH, HEIGHT);
   frameRate(FRAME_RATE);
   colorMode(RGB,255,255,255,100);
   
   <span class="category1">for</span> ( <span class="category1">int</span> i = 0; i &lt; ARRAY_SIZE; i ++ )
   {
      datum[i] = (float) <span class="category2">Math</span>.<span class="category2">random</span>();
    }
   smooth();
}

<span class="category1">void</span> draw() {
   
   strokeWeight(0);
   stroke( 0 );
   
   fill(0, 50);
   rect(0, 0, <span class="category2">width</span>, <span class="category2">height</span>);
   
   strokeWeight(2);
   stroke( #FFFF00 );
 
   <span class="category1">for</span> (<span class="category1">int</span> i = 0; i &lt; ARRAY_SIZE-1; i++) {
      x1 = i * xIncrement;
      y1 = datum[i] * HEIGHT;
      
      x2 = (i+1) * xIncrement;
      y2 = datum[i+1] * HEIGHT;
      
      line( x1, y1, x2, y2 );
    }
   
   <span class="category1">for</span> (<span class="category1">int</span> i = 0; i &lt; ARRAY_SIZE-1; i++) {
      datum[i] = datum[i+1]; 
    }
   value = datum[ARRAY_SIZE-2] + ( (<span class="category2">Math</span>.<span class="category2">random</span>() &gt; .5) ? 1 : -1)* (float) (<span class="category2">Math</span>.<span class="category2">random</span>() * .15);
   value = (float) <span class="category2">Math</span>.<span class="category2">max</span>( value, 0 );
   value = (float) <span class="category2">Math</span>.<span class="category2">min</span>( value, 1 );
   datum[ARRAY_SIZE-1] = value;
}</pre>
</code>

</div></div> 

___________________________________<br/>
<strong>Andrew Trice</strong><br/>
Principal Architect<br/>
<a href="http://www.cynergysystems.com" target="_blank">Cynergy Systems<br/>
http://www.cynergysystems.com</a>
]]>
      
    </content>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043889</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043889" />
    <title>Comment from Andrew Trice on 2008-10-08</title>
    <author>
        <name>Andrew Trice</name>
        <uri>http://www.tricedesigns.com/</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://www.tricedesigns.com/">
        <![CDATA[<p>2 additional things:<br />
1) This apparently doesn't work in Google chrome<br />
2) Those trails for the lines are on purpose<br />
:)</p>]]>
    </content>
    <published>2008-10-09T03:41:47Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043897</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043897" />
    <title>Comment from christian on 2008-10-09</title>
    <author>
        <name>christian</name>
        <uri>http://nuthinking.com</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://nuthinking.com">
        <![CDATA[<p>If you want to do something more than sketches, I definitely recommend using Eclipse. Other option would be to use JEdit, if you look around there should be a template for it. The problem is the JVM, I tried to look at your applet with all the JVMs on my Mac with Leopard (1.4.2, 5, 6) and I got errors.</p>]]>
    </content>
    <published>2008-10-09T07:31:23Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043909</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043909" />
    <title>Comment from Pau on 2008-10-09</title>
    <author>
        <name>Pau</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>Andrew, </p>

<p>This works with Google Chrome and Java version 6, update 10</p>]]>
    </content>
    <published>2008-10-09T10:43:50Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043928</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043928" />
    <title>Comment from Richard Monson-Haefel on 2008-10-09</title>
    <author>
        <name>Richard Monson-Haefel</name>
        <uri>http://www.curl.com</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://www.curl.com">
        <![CDATA[<p>Nice application! I'm also really excited about processing and wrote a blog entry on it on this site not too long ago - its very cool.</p>

<p>Here is my Blog entry:<br />
<a href="http://www.insideria.com/2008/08/curl-and-the-java-processing-l.html">http://www.insideria.com/2008/08/curl-and-the-java-processing-l.html</a></p>

<p>Your demo is not working on my Firefox browser (v. 2.0.0.17) on my Mac OS X (v. 10.5.4), which is strange because the demos on processing.org work fine with that browser and OS. </p>

<p>Your demo does work, however,  when I use Safari (v. 3.1.2) on the same machine. </p>]]>
    </content>
    <published>2008-10-09T15:18:01Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043930</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043930" />
    <title>Comment from Andrew Trice on 2008-10-09</title>
    <author>
        <name>Andrew Trice</name>
        <uri>http://www.tricedesigns.com</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://www.tricedesigns.com">
        <![CDATA[<p>Very cool Richard, I'll have to check it out.   I compiled everything using the default Java SDK in the Processing distribution... I'll have to check what version it actually needs for the run-time player.   </p>]]>
    </content>
    <published>2008-10-09T15:33:15Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043941</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043941" />
    <title>Comment from Josh Tynjala on 2008-10-09</title>
    <author>
        <name>Josh Tynjala</name>
        <uri>http://joshblog.net/</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://joshblog.net/">
        <![CDATA[<p>I can't see the demo in FF3/MacOSX. Like Richard's situation, it works in Safari.</p>]]>
    </content>
    <published>2008-10-09T20:10:28Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.33720-comment:2043975</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.33720" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/10/data-visualization-with-proces.html#comment-2043975" />
    <title>Comment from Anthony Starks on 2008-10-09</title>
    <author>
        <name>Anthony Starks</name>
        <uri>http://mindchunk.blogspot.com/</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://mindchunk.blogspot.com/">
        <![CDATA[<p>a few nits:  </p>

<p>1) use background(0,50) <br />
2) use height instead of HEIGHT draw()<br />
3) use Processing's built-in min, max, and random functions</p>]]>
    </content>
    <published>2008-10-09T22:19:23Z</published>
  </entry>

</feed
