Home Examples Documentation Playground Source

Stardust: GPU-based Visualization Library

Stardust is a library for rendering information visualizations with GPU (WebGL). Stardust provides an easy-to-use and familiar API for defining marks and binding data to them. With Stardust, you can render tens of thousands of markers and animate them in real time without the hassle of managing WebGL shaders and buffers.

Play with the library in the online playground:

Install with npm:

npm install stardust-core
npm install stardust-webgl

Link to the latest release:

<script type="text/javascript" src="//stardustjs.github.io/stardust/v0.1.1/stardust.bundle.min.js"></script>

Checkout the source code here:

Getting Started

First, let’s create an HTML file with a script tag to the Stardust library:

<!DOCTYPE html>
<meta charset="utf-8">
<script type="text/javascript" src="//stardustjs.github.io/stardust/v0.1.1/stardust.bundle.min.js"></script>

Add a canvas element for our visualization:

<canvas id="main-canvas"></canvas>

Initialize the WebGL platform:

<script type="text/javascript">
    // Get our canvas element
    var canvas = document.getElementById("main-canvas");
    var width = 960;
    var height = 500;

    // Create a WebGL 2D platform on the canvas:
    var platform = Stardust.platform("webgl-2d", canvas, width, height);

    // ... Load data and render your visualization
</script>

For the tutorial, let’s make some data. You can load data from JSON or CSV files using other libraries such as D3.

var data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

Create a Stardust mark specification:

var circleSpec = Stardust.mark.circle();

Create a mark object using the spec on our WebGL platform:

var circles = Stardust.mark.create(circleSpec, platform);

Bind data attributes to the circles:

circles.attr("center", (d) => [ d * 80, 250 ]);
circles.attr("radius", (d) => d * 3);
circles.attr("color", [ 0, 0, 0, 1 ]);

Bind our data items to the circles:

circles.data(data);

Render the circles:

circles.render();

You may change data bindings and call render again:

// Update binding attributes
circles.attr("color", [ 1, 0, 0, 1 ]);

// Clear the previously rendered stuff
platform.clear();

// Re-render the circles
circles.render();

Publication

Next Steps