3D data visualization using babylon.js

[Wink]

I'm interested in 3D data visualization and was wondering what example code or libraries might be available. I found this Create a force directed graph topic and the weathermap example looked interesting. Id like to be able to create 3D axes with ticks and labels on the axes and then visualize the data within the graph.

Thanks in advance,

Wink

[Wingnut]

Hiya @Wink.  Yeah, I'm interested in data-viz, too.  And I know the core framework coders would like to see DV applications, as well.  Truth is... there just has not been much seen/done.  There's the molecule viewer and a nice bargraph from the BJS website... they are both pretty nice.  There are also people displaying map data... on ground planes and height maps... elevation data viewing.  Then this thing. 

And then there is this thing.  err.. no, that wasn't DV (data viz) at all... sorry. 

I'm looking for a pie graph that someone did.  It was pretty decent... but I can't find the playground demo (PG) yet.  I'll add it to this list... if I find it.

There are a few others doing DV things.  One is an audio spectrum analyser/displayer... but it only works as well as the filters in the W3C WebAudio system work.

For showing axes and printing X-Y-Z axis labels, there are toys for that, too. Here is one way.  Here is a fatter way.

Yeah, I think data viz and webGL will become best friends, in the future.  Others will surely comment soon.

[Wink]

Thanks, @Wingnutthe first toy app is a good start. I've modified it to create some tick marks.

Next, I'd like to change the labels to always face the camera like in the weathermap, is the source for it or a similar example available?

[JohnK]

@Wink billboardMode is your friend. Checkout line 44

http://www.babylonjs-playground.com/#13XUOM#2

[Wingnut]

Cool.  http://www.babylonjs-playground.com/#13XUOM#1

Line 40 - billboardMode on ALL axes... works pretty good for making the labels face camera.

Because of the way billboardMode works, the labels will do a strange little "spin" when the camera is looking straight along the Y axes, from extreme top or bottom.  (drag the camera all the way forward or all the way back - which makes arcRotateCamera.beta near 0 or near 3.14).  Not much can be done about that.

The weathermap source is likely available from a local hero named Jerome.  Jerome is a pro mesh-wrangler and has added MANY mesh-building features to BJS... one of which is "extrusion", which is another tool you might use.  In the master tutorials list, #16 and #19 are two of his... that might apply.  But all the tutorials are pretty nice.

Do you have URLs for docs site, playground searcher, and forum searcher?  Now ya do.    The playground searcher doesn't like periods or other weird characters, unfortunately.  But, last we checked, there were about 20,000 playground demos in the DB, so it's a pretty good source... for source.  In the browser usage graph, those boxes scale-up on ONE end of the Y-axis (instead of both ends)... because of a handy origin/pivot point mover called setPivotMatrix.  This might be handy for your graphing, and it would be a nice "first playground search" for you.

[Wingnut]

Oh John, ya beat me to it.    It's all good.  Hi John... good to see you again.

[Wink]

Thanks @JohnK and @Wingnut one other question, I'm going to probably need quite a few labels so I was thinking maybe I should use Canvas2D, what do you think?