Hello Forum,

I'm trying out Protovis-Java ( http://mbostock.github.com/protovis/protovis-java/) for generating nice little charts. Since Protovis-Java uses JOGL I hoped to integrate the charts into the Processing rendering context.

Has anybody an idea how I could realize that? Protovis-Java uses a GLDisplay object that I try to use inside Processing.

Thx!

Here is the code:

1. import pv.mark.Mark;
   import pv.mark.Scene;
   import pv.mark.constants.MarkType;
   import pv.render.Display;
   import pv.render.awt.gl.GLDisplay;
   import pv.style.Easing;
   
   void setup(){
     size(400, 600);
     background(255);
    
   
   try{
   
     //params
     int N = 100, w = 500, h = 200; // sizing parameters
          
     // generate a list of data elements
     // we use a one element array so we can update the value
     final List<int[]> data = new ArrayList<int[]>();
       for (int i=0; i<N; ++i) {
       data.add(new int[]{(int)(1 + 100*Math.random())});
       }
    
     // -- vis ---
          
     // create the visualization scene
     final Scene vis = new Scene();
     vis.top(10).left(10).width(w).height(h); 
    
     // Define property bundles to define how items should
     //  (a) enter the scene: how to initialize newly visible elements
     //  (b) exit the scene: how removed elements should disappear
     // Note that be default, elements animate to/from alpha=0
     // To change this, one must define the alpha property
     Mark enter, exit;
          
     // new elements will 'grow' out of the baseline
     enter = Mark.create()
     .left("{{item.left + 5}}")
     .bottom(0)
     .height(0)
     .width(0)
     ;
     // exiting elements will 'shrink' into the baseline
     exit = Mark.create()
     .left("{{item.left - 3}}")
     .bottom("{{item.bottom}}")
     .height(0)
     .width(0)
     ;
          
   //        // new elements will drop in from the sky
   //        enter = Mark.build()
   //            .left("{{item.left + 5}}")
   //            .bottom(h)
   //            ;
   //        // exiting elemtns will 'blow up' as they fade out
   //        exit = Mark.build()
   //            .left("{{item.left - 3 - 5}}")
   //            .bottom("{{item.bottom - 5}}")
   //            .width("{{item.width + 10}}")
   //            .height("{{item.height + 10}}")
   //            ;
          
   // Show data as a simple bar chart
   vis.add(MarkType.Bar)
       .def("i", -1)
       .data(data).datatype(int[].class)
       .key("{{data.hashCode()}}")
       .left("{{index*5}}")
       .height("{{data[0]}}")
       .bottom(0)
       .width(3)
       .fill("{{Fill.solid(i==index ? 0xff0000 : 0x1f27b4)}}")
       .delay("{{0.005*index}}") // determine animation delay
       .ease(Easing.Poly(2.2)) // determine animation style (easing)
       .enter(enter)
       .exit(exit)
       .mouseEnter("{{i(index).update()}}")
       .mouseExit("{{i(-1).update()}}");
          
       vis.update();
      
       // -- display stuff ---
          
      Display display = new GLDisplay();
      display.setSize(w+20, h+20);
      display.addScene(vis);
   
     }
   
   catch(Exception e){
   e.printStackTrace();
   }
   }
   
   void draw(){
   
     // integrate 'display' and show chart on screen
   
   }