7

Here is what i am trying to do : http://mbostock.github.com/d3/talk/20111116/iris-splom.html

But i want to do that in webgl 2d (because SVG performance is very slow, randering 10k SVG only already drops to 12 fps)

On a quick search i found several webgl-2d libs : cocos2d-html5 , pixijs,Three.js and webgl-2d(abandoned?)

They seems to be pretty easy but what i want to do is data visualization.cocos and pixijs are 2d game libraries. I am new to webgl and those libraries so experts at SO can you guys recommend ?

summary of things i need:

Interaction :

  • Rectangular selection inside plots. Click to select on Some elements.
  • Zoom and Pan Support (Semitic Zooming if possible)

Renderer : WebGL2d (according to benchmarks webgl is fastest)

Phyo Arkar Lwin
  • 6,673
  • 12
  • 41
  • 55

1 Answers1

3

Based on your requirements and summary, I would recommend the latest release of Cocos2D-html5 which includes WebGL rendering support. This is as simple as changing the rendering setting from Canvas to WebGL in the cocos2d.js settings file. For Example, in HelloHTML5World/cocos2d.js change renderMode to 2 for WebGL based rendering.

renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)

Cocos2d-html5 is more precisely a graphics library and & maybe construed as a complete game library only in combination with the (default) chipmunk or box2d game physics libraries.

Does it support rectangular selection, or zoom and pan? Yes, you can extend the existing libraries to implement these behaviours.

Other advantage of Cocos2d-html5 platform is added support for visual graphics editing with Cocosbuilder and cross-platform native support (iOS, Android etc) for same codebase with Javascript bindings.

If you have specific platform questions, these can be answered in better detail with code.

You may want to look at the JS reference and the cocos2d-html5 forum for getting started.

Update1: Looked at your data visualization code for iris dataset, The plots are housed in a svg element, with tiny circles plotting each datapoint according to x,y coordinates. These can be accomplished in Cocos2d too via x,y coordinates, grids, boxes with varying opacity and the tiny circles for the data points. Import your iris dataset in json/xmll/csv format via javascript code and plot via above cocos2d methods. Rectangle selection via javascript event callbacks & mousehandler methods and corresponding update of canvas scene.

Update2: On second thoughts, if you find the learning curve for cocos2d steep, you may better restrict yourself to a charting only library which is WebGL based. This project VivaGraphJS seems suitable with high performance being WebGL based.

Also, please ask questions preferably in this format, what you tried in code, what was the expected output, what you got instead. SO is not meant for comparison of libraries. WebGL is a rendering method. The switch, for example in three.js is as simple as 

renderer = new THREE.WebGLRenderer();

instead of the canvas one:

renderer = new THREE.CanvasRenderer();

resulting in higher performance.

S G
  • 126
  • 6
  • What i want to do is combine d3 visualization with webgl(2D) , i will edit more , for links what kind of visualizations i would like to do with webgl(2d) + coscos (or any other webgl lib). – Phyo Arkar Lwin May 02 '13 at 16:45
  • Oh wait , i already have link to scatterplots using d3 in original post. Can you please check there carefully too? – Phyo Arkar Lwin May 02 '13 at 16:46
  • Yes, I have checked the scatterplots. Cocos2d is just another javascript framework writing to canvas. You can integrate it with your existing javascript code with minor modifications. Consider cocos2d as just an webgl plotter and interaction library for your existing d3.js codebase. But, why the down vote? – S G May 02 '13 at 20:21
  • Thanks , i am am going to do with D3 + cocos first .and i will let you know. I did down-voted you instead of up-voting by mistake. Touch screens are crazy.. – Phyo Arkar Lwin May 03 '13 at 18:13
  • I choose to scrap this idea , i end up using Three.js only using particles , and raytracer of three.js for rectangular selections . But this is a good answer so i will mark as answered. – Phyo Arkar Lwin Oct 06 '14 at 16:57
  • @SG: Thanks for the great information. I need to set the relative horizontal position of nodes is that possible using Viva? – Mohsen Feb 15 '21 at 03:36