search

anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.76k stars 425 forks source link

Pie charts at node location #140

Open bfrgoncalves opened 9 years ago

bfrgoncalves commented 9 years ago

Hi,

I was wandering if you can help me... I want to produce a pie chart at node locations of a graph. I know how to do it with SVG but currently I'm using WebGl for large graphs. Because I'm starting to learn WebGL, I was wondering if you have any ideia how to do it. I'm sending to you a sample graph in SVG.

pie_chart_graph

Thanks in advance,

Bruno

bfrgoncalves commented 9 years ago

So I have managed to modify the shaders to create pie charts at node position, however I'm having some problems passing information about the angles to the shaders, since that every node will have different number of parts and different angles.

Any ideas on how can I achieve this?

This is what I have until now.

piechartwebgl

Thanks.

anvaka commented 9 years ago

This is impressive work!

I think you could encode angles information into a texture, and then pass offsets into shader as a buffer. Each node would get two indices in the buffer, and then based on these attributes read from texture with texture2D operation.

bfrgoncalves commented 9 years ago

Thanks. I still don't know how to work with textures but can you give me a small example on how can I achieve that or do you know some kind of useful tutorial to help me build that texture?

bfrgoncalves commented 9 years ago

Hi Andrei,

I've managed to pass angles information to the shaders, however to change the pie chart information I need to change shaders on the fly. I've tried with the .setNodeProgram() but it's not possible. Do you know a way to achieve this?

Thanks

gg4u commented 9 years ago

Hi Bfrgoncalves,

that's cool representation! if you have something in SVG too, would you mind to share it as a demo? It would be helpful - I wonder if it weigth too much to render, it would be cool to check it out.

bfrgoncalves commented 9 years ago

Hi,

In the last days I came back to this issue and I am having some troubles having my shaders to work on different machines. It works fine on mine but on Mac the pie charts do not appear on the screen. Any ideas on why shaders are acting differently? To the shader I am passing information of the angles and color on each quadrant of the circle and the pie charts according to these parameters.

I have developed a demo to test the pie charts (http://bfrgoncalves.github.io/test_pieCharts/) and you can change the angle numbers on a select button on the upper-left corner. Code available at: https://github.com/bfrgoncalves/test_pieCharts

Also here you can see how pie charts look on the app I am developing: https://www.youtube.com/watch?v=_8ZZ27suwHU