Quid strives to power human intuition by delivering vast quantities of data and their connections through network visualizations. Those networks are usually made of nodes and edges. Lots of them. To enable our customers to visualize, navigate and manipulate these big networks in their browser, a question naturally arises: how can we render those nodes and edges as fast as possible? WebGL To The Rescue WebGL lends the power of the computer’s GPU to the web browser which affords processing large amounts of geometric data quickly in parallel. However, WebGL’s rather rudimentary set of APIs focused largely on drawing points, lines, and triangles, which makes our life difficult when drawing curved edges. Rendering edges with lines is quickly rejected due to the WebGL’s poor support of line endings and joints1. What if we draw triangles? First thought in mind would be to divide the curve into multiple segments and fit each of them with a quadrilateral (quad), which is rendered as two triangles. We increase the number of segments until the curve is smooth enough. Bartosz Ciechanowski describes this approach in his article “Drawing Bézier Curves”2. Although this would work if we had only tens or hundreds of edges to […]

Read More## Posts tagged webgl

# Reaching Equilibrium in Web Browser Network Visualizations

Quid allows users to derive data driven insights from extensive, unstructured data sets. Not only do we collect and analyze the world’s unstructured data, but we also present this data to customers in a way that instigates insight and inspiration, and ultimately adds value to their business. On the engineering side, we’ve been faced with the challenge of visualizing information organized into networks in a meaningful and efficient way. The networks consist of nodes, or vertices, and links between them, also called edges. The vertices stand for real-world entities, and edges represent a variety of relationships between them. This structured illumination helps us understand a given data set faster and more fully. While network generation takes place on Quid’s infrastructure, the interactive visualization runs entirely in your web browser. This means displaying and manipulating thousands of vertices and edges in an environment not known for speed. Quid engineers are always looking for ways to up the amount of data on display, while keeping a responsive frame rate; optimizing the network visualization is one of the more satisfying improvements we have made recently. Read on to find out how we did that! Providing Structure to the Unstructured Some networks are easier to draw than others. Spiders, for example, weave nets that are both […]

Read More