ogdf.js

Introduction

The project is forked from Basasuya/ogdf.js. The idea of this project is to compile the C++ library OGDF into a JavaScript library. The former stands both for Open Graph Drawing Framework (the original name) and Open Graph algorithms and Data structures Framework.

We now aim to use emscripten to compile the Layout part of OGDF into ogdf.js.

How to use

Two layout algorithms are supported now:

• FMMM: the fast multipole multilevel layout algorithm
• PivotMDS: the Pivot MDS (multi-dimensional scaling) layout algorithm.

Examples can be found in ./examples. We use NetV.js to render the graph.

// layouts can be called like:
fm3(/* graph data */ { nodes: facebook.nodes, links: facebook.links },
    /* parameters */ { qualityVersusSpeed: "GorgeousAndEfficient" },
    /* callback */ (graph) => {
        netv.data(graph)
        netv.draw()
    }
)

How to build it?

We suggest you to build ogdf.js with Linux or MacOS (we still have no experience with Windows OS to build the ogdf library, for Windows developers, WSL is suggested). Before building the ogdf.js, you should make sure you have enviroments to build C++ library:

• Git
• CMake
• Compiling tools. GCC (Linux), Xcode (MacOS)
• Python 2.7.x

Building Steps

1. Download and install Emscripten. Here is several main steps, and please refer to the official document for more details:

   # Get the emsdk repo
   $ git clone https://github.com/emscripten-core/emsdk.git
   
   # Enter that directory
   $ cd emsdk
   
   # Fetch the latest version of the emsdk (not needed the first time you clone)
   $ git pull
   
   # Download and install the latest SDK tools.
   $ ./emsdk install latest
   
   # Make the "latest" SDK "active" for the current user. (writes .emscripten file)
   $ ./emsdk activate latest
   
   # Activate PATH and other environment variables in the current terminal
   $ source ./emsdk_env.sh

   To ensure that you have install Emscripten successfully, you can create a folder with a file:

   $ mkdir hello
   $ cd hello
   $ echo '#include <stdio.h>' > hello.c
   $ echo 'int main(int argc, char ** argv) {' >> hello.c
   $ echo 'printf("Hello, world!\n");' >> hello.c
   $ echo '}' >> hello.c
   $ emcc hello.c -s WASM=1 -o hello.html

   Then you can start a localhost server to view the html.

2. Build ogdf library.

   $ cd ogdf
   $ mkdir build && cd build
   $ emcmake cmake ..
   $ emmake make

   Everytime you restart your OS, you should run ./emsdk activate latest and source ./emsdk_env.sh in step one the ensure your environment is correct

   For the "this header is only for x86 only" error, please refer to: emscripten-issue-9363

3. Build rawogdf.js

   $ make rawogdf.js

4. Build ogdf.js

   $ npm install
   $ npm run build

Progress

• add other layout algorithms