Blog about (Web-) Programming, Graphics and Games.

05.05.2015

Gree - 3d graphs (of json or javascript)

Experimenting on a new project called 'Gree' (from GRaphs with thrEE.js) to display and edit 3d graphs of json data or sourcecode. Motive is, that complex interconnected networks are difficult to display in 2d, e.g. edges overlap. 3d should improve visibility. To best utilize this, stereoscopic view (e.g. via vr device) is needed, since else the graph stays 2d projection. Currently there are 2 applications. The first is a general 3d graph tool. Graph data is represented and editable in json format. The graph can be modified by dragging its nodes.
► Gree Json

Second application generates 3d graphs of javascript sourcecode and vice versa. Why make 3d graphs of sourcecode? Code (display/editing) can be in a way redundant, because everytime a function is called, its name must be written. So a function name can appear multiple times. Alternatively a function could be represented as graph node (its name only displayed once) and everytime it is called, an edge to that node is drawn. This project tries to go that direction. Here an edge between 2 function nodes is drawn if one function is called from the other. For complex code with lots functions this can give a quick overview of code semantics. 3d positions of nodes are stored as comments above related functions. If the graph is modified by dragging its nodes, javascript can be generated with updated position comments. Javascript is parsed with acorn.js and generated with escodegen.js.
► Gree Javascript