3D Graph control with the Leap Motion (and LeapTrainer!)
Hi all,
I thought I'd share something I've been working on. Actually, this is a component of a larger project (the same project LeapTrainer.js is a part of) - it's a 3D graphing system, controlled using Leap input.
The video is on YouTube, right here.
This video shows a stock ticker symbol being input, and data then being loaded from the Securities and Exchange Commission public website - which lists ownership of U.S. companies, management structures, and so on.
The data is gathered on the server, and then streamed to the browser, where it's rendered as a 3D WebGL graph. The camera in the 3D space can be controlled using the Leap.
LeapTrainer.js gestures are used to trigger layout algorithms which animate the graph nodes and connections into new positions.
Thanks,
R
Very pretty.
Big data needs new ways of being visualized.
This is where you are trying to get to. Its not easy. There will be mistakes.
But if we are to solve all the issues looming upon us, then we need to be able to see those issues - and all their complexity - much more clearly than people in the past have been able to see them...
Hi, roboleary
your project is very interesting to me.
since the LEAP has been released I wanted to do a demonstration during my Social Network course at the university but I could not find any software that would allow me to do it, neither I have time to write the code from scratch.
May I ask which code for the WebGL 3D graph have you used? Does it include the layout algorithms?
PS: Is on your plan to publish the code or part of it?
Hi!
I wrote this graphing system myself - I'm using three.js for for rendering and the layouts are mostly based on d3.js, though translated to three dimensions, and the 3D heirarchy (my personal favourite) is a transformation of a 2D reingold tilford hierarchy. There's a core graph object to which a set of capabilities are applied - in this case, keyboard, mouse and gesture input, animated layout, WebGL rendering, touch and mouse dragging of nodes (not gesture - yet!), and so on. Nodes and connections to be added to the graph are streamed from a node.js server I put together, which loads data from the SEC, or a Redis cache, if the data was loaded before.
I'm not quite sure what I'll do with this system yet - it's actually a part of a larger semantic search system, which you can see here. I don't plan to put the code out right now anyway - there's still lots to do, and I'm not sure what I'll do with the whole system when it's done.
Thanks!
R