Skip to content

index.md

Latest commit

 

History

History
149 lines (107 loc) · 4.31 KB

index.md

File metadata and controls

149 lines (107 loc) · 4.31 KB
layout default
title Stardust: GPU-based Visualization Library

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

  • Stardust: Accessible and Transparent GPU Support for Information Visualization Rendering
    Donghao Ren, Bongshin Lee, Tobias Höllerer
    Computer Graphics Forum (Proc. EuroVis), 2017
    [ PDF | Video ]

Next Steps