Suitable library for combining with D3js , to allowing drawing to webgl (2D)

Question

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)

Answer 1

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.