Canvas vs WebGL graph visualization

HTML5 techniques for graph visualization include svg, canvas and webgl. Each advantages and disadvantages about them had known since early like this.

In short summary:

  • SVG was and is the best option for rendering high-quality vector graphics
  • Canvas is faster for simple graphics and familiar with javascript
  • WebGL is a beast to work with, but APIs are not gentle

SVG is highly compatible with web technologies and offers very good quality for the purpose of decorating. Neo4j browser built based on SVG.

Canvas is the best way to represent graphical elements. Not only is it fast, it also has great user interface features including animation. Graph Workspace of Linkurious built based on Canvas with their own library ogma.js. AgensBrowser for AgensGraph built based on Canvas with cytoscape.js. (Cytoscape is famous graph visualization library for Desktop Application)

WebGL is usually used for game implementation. Represent three-dimensional graphics through shaders. Realizing complex graphics also requires knowledge of mathematics. One example is the three.js library. WebGL can use the web browser’s graphics acceleration features (also canvas can do), and also can render using the GPU with options.

The problem with visualizing Big-graph is “Hairball“. Too many nodes and edges do not reveal the graph structure.The title image show this problems. (Left is WebGL rendering by El Grapho, Right is Canvas rendering by cytoscape.js)

In addition to visual quality, there is a big difference in rendering performance. The experiment was run on an Apple MacBook Pro 2015 laptop.

How long can users wait to rendering big-graph visualizations?

  • Depending on the graph size, I guess the maximum is 7 to 8 seconds.
  • In a typical rendering, you’ll only have a couple of seconds to assume that the user won’t complain.
  • Based on these criteria, the Canvas is generally suitable to render at around 2000 and up to 20,000 elements. the WebGL is suitable to usually around 500k, with a maximum of 2M elements. (Where graph size is the sum of the number of nodes and edges)

How to use the limitations of rendering performance?

Even with the emergence of super WebGL technology, there will be no visual representation of more than one billion big data sets. Every technology has its limitations and how you use it to achieve your goals.

  • Displaying all the data visually is a very inefficient method, but if you want to do so, I recommend using graph algorithms to process and visualize graph summaries. For example, motif, edge contraction, grouping, etc.
  • If you want to quickly select and visualize the parts of the graph you want to analyze from the whole, you can print the entire graph using WebGL and explore the detailed graph with Box-selection.
  • If you want to expand and explore related graph data around specific data, a canvas visualization with powerful user interaction is a good choice.

We are making various attempts to visualize big graphs. He is developing a product that enables visual presentation using WebGL, analyzes big graphs using Apache Spark and GraphFrame, and combines Elasticsearch and Gremlin to enable fast graph retrieval.

Have a good day.

Byeong-guk Min, Graph Visualization Dev. team, Bitnine

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요: 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중