<?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/06/3d-charts-using-papervision3d.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.23937-</id>
  <updated>2009-11-20T02:10:33Z</updated>
  <title>Comments for 3D Charts Using PaperVision3D (http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html)</title>
  <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.21-en</generator>
  <entry>
    <id>tag:www.insideria.com,2008://34.23937</id>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.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=23937" title="3D Charts Using PaperVision3D" />
    <published>2008-06-10T02:08:51Z</published>
    <updated>2008-06-10T02:08:51Z</updated>
    <title>3D Charts Using PaperVision3D</title>
    <summary>I haven&apos;t touched PaperVision3D in a while, and some of the recent articles here on insideria.com motivated me to dive in and take a look around.  Here&apos;s what I came up with after sitting down with it for an evening...</summary>
    <author>
      <name>Andrew Trice</name>
      
    </author>
    
    <category term="Blogs" />
    
    <content type="html" xml:lang="en" xml:base="http://www.insideria.com/">
      <![CDATA[I haven't touched <a href="http://blog.papervision3d.org/" target="_blank">PaperVision3D</a> in a while, and some of the <a target="_blank" href="http://www.insideria.com/2008/05/textures-wireframe-bitmap-movi-1.html">recent articles here on insideria.com</a> motivated me to dive in and take a look around.  Here's what I came up with after sitting down with it for an evening...
<br /><br />
I'm always looking for interesting ways to visualize data, and have built some interesting 3D charting using PaperVision3D in the past.   Now, its time to dive in using the latest "Great White" build of PaperVision3D, which has some interesting new features.  
<br /><br />
One of the features in "GreatWhite" that intrigued me the most is the new Line3D class.  You can use Line3D to draw lines in a three dimensional space.   This enables a lot with respect to data visualization.  You can use the three dimensional lines to create interactive 3d charting, modeling, or graphing components.
<br /><br />
This example shows a really basic rotating 3D chart.   There are two important things that it shows.
<br /><br />
<strong>1) A three dimensional scatter plot.<br />
2) A three dimensional line chart</strong>
<br /><br />
The data points between the scatter plot and line chart are exactly the same.  The combined effect is a 3D scatter plot with lines connecting each data point.
<br /><br />
Here's the example:
<br /><br />
<iframe 
src="http://www.tricedesigns.com/portfolio/pv3dchart/Line3DChart.html"
width="425" height="350" frameborder="0">
</iframe>

<br /><br />

The first thing this example does is setup the axes: <br />
The x axis is red.  The y axis green.  The z axis is blue.<br /><br />

The next thing that it to does is setup the lines container and randomly add the data points.   This could be changed to be dynamic based on collections, or specified through a public getter/setter, but for this example its just random.  Perhaps in a later blog post I'll elaborate on it further.  For each data point, it adds a sphere object, and a line3D object.  The line3D objects will connect the sphere. <br /><br />

Once all of the data objects and 3d structures are setup, it enters a rendering cycle based on "enterframe" events.   On every frame instance, it will rotate the chart around the y axis, and redraw the chart "scene".

<br /><br />

And here's the code that makes it work:
<br />
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;"> 
<code language="perl">
<pre> 
package  
{
  
   <span class="category1">import</span> flash.events.Event;
   
   <span class="category1">import</span> org.papervision3d.core.geom.Lines3D;
   <span class="category1">import</span> org.papervision3d.core.geom.renderables.Line3D;
   <span class="category1">import</span> org.papervision3d.core.geom.renderables.Vertex3D;
   <span class="category1">import</span> org.papervision3d.materials.ColorMaterial;
   <span class="category1">import</span> org.papervision3d.materials.special.LineMaterial;
   <span class="category1">import</span> org.papervision3d.objects.DisplayObject3D;
   <span class="category1">import</span> org.papervision3d.objects.primitives.Sphere;
   <span class="category1">import</span> org.papervision3d.view.BasicView;
  
    [SWF(<span class="category2">backgroundColor</span>="<span class="quote">#000000</span>",<span class="category2">width</span>="<span class="quote">425</span>",<span class="category2">height</span>="<span class="quote">350</span>")]
   <span class="category1">public</span> <span class="category1">class</span> Line3DChart <span class="category1">extends</span> BasicView 
   {
      <span class="category1">public</span> <span class="category1">var</span> chartContainer:DisplayObject3D;
      <span class="category1">public</span> <span class="category1">var</span> chart:DisplayObject3D;
      <span class="category1">private</span> <span class="category1">var</span> dataPoints : <span class="category2">Array</span>;
         
       <span class="category1">private</span> <span class="category1">static</span> const RADIUS : <span class="category1">int</span> = 20;
       <span class="category1">private</span> <span class="category1">static</span> const MAX_SIZE : <span class="category1">int</span> = 600; 
       <span class="category1">private</span> <span class="category1">static</span> const AXIS_SIZE : <span class="category1">int</span> = 800; 
   
      <span class="category1">public</span> <span class="category1">function</span> Line3DChart()
      {
         <span class="category1">super</span>(stage.stageWidth, stage.stageHeight, <span class="category1">false</span>, <span class="category1">true</span>);
         <span class="category2">init</span>(); 
       }
   
      <span class="category1">private</span> <span class="category1">function</span> <span class="category2">init</span>():<span class="category1">void</span>
      {
    
         chartContainer = <span class="category1">new</span> DisplayObject3D("<span class="quote">Chart Container</span>");
         chart = <span class="category1">new</span> DisplayObject3D("<span class="quote">Chart</span>");
         
         chartContainer.rotationY=-15;
         chartContainer.rotationX=-15;
         dataPoints = <span class="category1">new</span> <span class="category2">Array</span>(); 
    
          <span class="category1">var</span> defaultMaterial : LineMaterial = <span class="category1">new</span> LineMaterial(0xFFFFFF, .1);
          <span class="category1">var</span> xAxisMaterial : LineMaterial = <span class="category1">new</span> LineMaterial( 0xFF0000, .75 );
          <span class="category1">var</span> yAxisMaterial : LineMaterial = <span class="category1">new</span> LineMaterial( 0x00FF00, .75 );
          <span class="category1">var</span> zAxisMaterial : LineMaterial = <span class="category1">new</span> LineMaterial( 0x0000FF, .75 );
          <span class="category1">var</span> dataMaterial : ColorMaterial = <span class="category1">new</span> ColorMaterial( 0xFFFFFF, .65, <span class="category1">false</span> );
        
          <span class="category1">var</span> axes : Lines3D = <span class="category1">new</span> Lines3D( defaultMaterial, "<span class="quote">Axes</span>" );
          axes.addLine( <span class="category1">new</span> Line3D( axes, xAxisMaterial, 2, <span class="category1">new</span> Vertex3D( -AXIS_SIZE,0,0 ), <span class="category1">new</span> Vertex3D( AXIS_SIZE,0,0 ) ));
          axes.addLine( <span class="category1">new</span> Line3D( axes, yAxisMaterial, 2, <span class="category1">new</span> Vertex3D( 0,-AXIS_SIZE,0 ), <span class="category1">new</span> Vertex3D( 0,AXIS_SIZE,0 ) ));
          axes.addLine( <span class="category1">new</span> Line3D( axes, zAxisMaterial, 2, <span class="category1">new</span> Vertex3D( 0,0,-AXIS_SIZE ), <span class="category1">new</span> Vertex3D( 0,0,AXIS_SIZE ) ));
          
          <span class="category1">var</span> lines : Lines3D = <span class="category1">new</span> Lines3D( defaultMaterial, "<span class="quote">Lines</span>" );
          
          chart.addChild( axes );
          chart.addChild( lines );
          
          <span class="category1">var</span> lastVertex : Vertex3D;
          <span class="category1">var</span> currentVertex : Vertex3D = <span class="category1">new</span> Vertex3D();
          
         <span class="category1">for</span>(<span class="category1">var</span> i:<span class="category1">int</span> = 0; i&lt;50; i++)
         {
            lastVertex = currentVertex;
            currentVertex = <span class="category1">new</span> Vertex3D();
            
            currentVertex.<span class="category2">x</span> = <span class="category2">Math</span>.<span class="category2">random</span>() * MAX_SIZE * positiveOrNegative();
            currentVertex.<span class="category2">y</span> = <span class="category2">Math</span>.<span class="category2">random</span>() * MAX_SIZE * positiveOrNegative();
            currentVertex.z = <span class="category2">Math</span>.<span class="category2">random</span>() * MAX_SIZE * positiveOrNegative();
            
            <span class="category1">var</span> point : Sphere = <span class="category1">new</span> Sphere( dataMaterial, RADIUS );
            point.<span class="category2">x</span> = currentVertex.<span class="category2">x</span>;
            point.<span class="category2">y</span> = currentVertex.<span class="category2">y</span>;
            point.z = currentVertex.z;
            
            chart.addChild( point ); 
            
            <span class="category1">var</span> line : Line3D = <span class="category1">new</span> Line3D( lines, defaultMaterial, 3, lastVertex, currentVertex );
            lines.addLine( line );
          }
    
          chartContainer.addChild(chart);
         scene.addChild(chartContainer); 
    
         singleRender(); 
    
         addEventListener(Event.ENTER_FRAME, <span class="category2">onEnterFrame</span>); 
       }
   
      <span class="category1">private</span> <span class="category1">function</span> <span class="category2">onEnterFrame</span>(e:Event): <span class="category1">void</span> 
      {
         chart.rotationY+=1; 
         singleRender(); 
       }
      
      <span class="category1">private</span> <span class="category1">function</span> positiveOrNegative() : <span class="category1">int</span>
      {
         <span class="category1">var</span> seed : <span class="category2">Number</span> = <span class="category2">Math</span>.<span class="category2">random</span>() * 100;
         <span class="category1">if</span> ( seed &gt; 50 )
           <span class="category1">return</span> 1;
         <span class="category1">else</span> 
           <span class="category1">return</span> -1;
       }
    }
}</pre>
</code>
 
</div></div> <br />

You can find more information on PaperVision 3D at:<br />
<a href="http://blog.papervision3d.org/ target="_blank">PaperVision3D Blog</a><br />
<a href="http://code.google.com/p/papervision3d/downloads/list target="_blank">PaperVision3D Downloads</a><br />
<a href="http://wiki.papervision3d.org/index.php?title=Main_Page target="_blank">PaperVision3D Wiki</a><br />
<a href="http://www.nabble.com/Papervision3D-f22855.html target="_blank">PaperVision3D Forums</a>


<br /><br />
You can view this application in a new window at:<br />
<a target="_blank" href="http://www.tricedesigns.com/portfolio/pv3dchart/Line3DChart.html">http://www.tricedesigns.com/portfolio/pv3dchart/Line3DChart.html</a>
<br /><br />
You can view the source at:<br />
<a target="_blank" href="http://www.tricedesigns.com/portfolio/pv3dchart/srcview/">http://www.tricedesigns.com/portfolio/pv3dchart/srcview/</a>
<br /><br />

<strong>Update:</strong><br/>
Here's a better example of what can be done with this.   I just changed the random placement to be programmatic.<br/><br/>
<iframe 
src="http://www.tricedesigns.com/portfolio/pv3dchart2/Line3DChart.html"
width="425" height="350" frameborder="0">
</iframe>
<br /><br />
The only different is in the placement of the vertices:
<div class="acode" style="overflow: auto; padding: 10px;" ><div style="overflow-x: visible;"> 
<code language="perl">
<pre> 
currentVertex.<span class="category2">x</span> = i;
currentVertex.<span class="category2">y</span> = <span class="category2">Math</span>.<span class="category2">cos</span>( i )* i;
currentVertex.z = <span class="category2">Math</span>.<span class="category2">sin</span>( i )* i;</pre>
</code>
 
</div></div> <br /><br />
___________________________________<br />
<strong>Andrew Trice</strong><br />
Principal Architect<br />
<a href="http://www.cynergysystems.com" target="_blank">Cynergy Systems
http://www.cynergysystems.com</a>]]>
      
    </content>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2017944</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2017944" />
    <title>Comment from ajitpal on 2008-06-16</title>
    <author>
        <name>ajitpal</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>well its really a nice example... to start with charting in 3d.. thax for such anice example..... i have one problem.. .could you tell me how to add different images tp same sphere</p>]]>
    </content>
    <published>2008-06-17T04:14:23Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2017955</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2017955" />
    <title>Comment from Andrew Trice on 2008-06-17</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>Here's a post showing actual application of the concepts in this blog post, with live data:  <a href="http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions"><a href="http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions">http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions</a></a></p>]]>
    </content>
    <published>2008-06-17T13:20:45Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2042968</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2042968" />
    <title>Comment from Micheli Knechtel on 2008-09-19</title>
    <author>
        <name>Micheli Knechtel</name>
        <uri>http://www.micheli.com.br</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://www.micheli.com.br">
        <![CDATA[<p>Hi Andrew,</p>

<p>I was looking your implementation, the link that you post above, and something came to my mind.</p>

<p>In this examples are you using flex chart class to calculate the positions of the 3d objects ?</p>

<p>Thanks,<br />
</p>]]>
    </content>
    <published>2008-09-19T16:36:59Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2042969</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2042969" />
    <title>Comment from Andrew Trice on 2008-09-19</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>No, it is calculating the vertex coordinates on its own.   They are the same data values, so the will have the same shape, but the actual layout and rendering is completely separate.</p>]]>
    </content>
    <published>2008-09-19T16:40:55Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2051299</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2051299" />
    <title>Comment from raj on 2009-01-19</title>
    <author>
        <name>raj</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>Hi,<br />
 I am new bee into world of actionscript. <br />
 Can you please tell me how to integrate this example in a mxml project?</p>]]>
    </content>
    <published>2009-01-19T21:47:01Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2053626</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2053626" />
    <title>Comment from Jeff on 2009-02-19</title>
    <author>
        <name>Jeff</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>I'm looking at doing something like this on a larger scale.  Any thoughts to the amount of objects (nodes) that could be handled by PaperVision?  100,000 or more... I'm currently using Partiview, but am looking at alternatives.  OpenSceneGraph was one... and PaperVision3d looks like it could be another and perhaps the easiest to work with.</p>]]>
    </content>
    <published>2009-02-19T14:12:39Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2060875</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2060875" />
    <title>Comment from Jaibabu on 2009-06-02</title>
    <author>
        <name>Jaibabu</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>Hi,</p>

<p>   I am trying to implement 3d chart for the OLAP Cube Data in Flex. Is it possible todo it in PaperVision3D. If yes please provide me some details and samples.</p>

<p>Thanks</p>]]>
    </content>
    <published>2009-06-02T07:42:17Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2066439</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2066439" />
    <title>Comment from robert woodbury on 2009-06-18</title>
    <author>
        <name>robert woodbury</name>
        <uri>http://robertwoodbury.com</uri>
    </author>
    <content type="html" xml:lang="en" xml:base="http://robertwoodbury.com">
        <![CDATA[<p>Is the distortion of circular objects at the edge of your chart a result of camera depth of field?  Seems like PV3d does it to everything. <br />
If you increase the camera distance and the zoom, you might get a bit less distortion. </p>

<p>I wonder if similar or better results could be obtained with simple 3d transforms in actionscript, rather than this more complex approach. </p>

<p>I have a simple javascript planet simulation which uses flat images with 3d transforms.  I am still not impressed with the speed or compatibility with older browsers of cs4 and flash10.</p>]]>
    </content>
    <published>2009-06-18T16:38:23Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2068711</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2068711" />
    <title>Comment from Raghvender on 2009-07-21</title>
    <author>
        <name>Raghvender</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>It looks very good...Could you please help me how can we draw 3d pie chart?</p>]]>
    </content>
    <published>2009-07-21T12:19:12Z</published>
  </entry>

  <entry>
    <id>tag:www.insideria.com,2008://34.23937-comment:2193708</id>
    <thr:in-reply-to ref="tag:www.insideria.com,2008://34.23937" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html"/>
    <link rel="alternate" type="text/html" href="http://www.insideria.com/2008/06/3d-charts-using-papervision3d.html#comment-2193708" />
    <title>Comment from britt on 2009-11-19</title>
    <author>
        <name>britt</name>
        <uri></uri>
    </author>
    <content type="html" xml:lang="en" xml:base="">
        <![CDATA[<p>Did you ever make the source for your other examples available.</p>

<p><a href="http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions">http://www.cynergysystems.com/blogs/page/andrewtrice?entry=visualizing_data_in_multiple_dimensions</a></p>

<p>I am starting to think about how to build a cluster chart in Flex and your examples would be helpful.</p>]]>
    </content>
    <published>2009-11-20T02:10:29Z</published>
  </entry>

</feed
