@msrvida/vega-deck.gl

View component for Vega visualizations, using deck.gl for WebGL rendering.

This project combines two great visualization libraries into one. You have the expressiveness of Vega specifications and the WebGL rendering of deck.gl. As a result, you have the option of visualizing data in 3 dimensions.

API Reference

Limitations

This project does not fully implement every feature provided by Vega. Some interactive features are omitted due to the nature of the 3D rendering model which breaks correspondence to the 2D rendering plane. Other features simply have yet to be developed, for these we will gladly accept a pull request.

Feature additions

Rect elements can be rendered as 3D cuboids. To do this, add "z" / "depth" encodings where you normally use "x" / "width" and "y" / "height".

Installation

You will need to consider how to load the libraries that vega-deck.gl depends on, based on your build & deployment scenario.

Installation via script tags

This is the quickest installation option. You can load scripts from a CDN, or you can serve them from your own website. In your HTML, add these tags:

<script src="https://unpkg.com/vega@^5.11/build/vega.js" charset="utf-8"></script>
<script src="https://unpkg.com/deck.gl@~8.3.7/dist.min.js"></script>
<script src="https://unpkg.com/@msrvida/vega-deck.gl@^3/dist/umd/vega-deck.gl.js"></script>

A global variable named VegaDeckGl will be available to you. In your JavaScript, call the use() function to pass the dependency libraries to VegaDeckGl:

VegaDeckGl.use(vega, deck, deck, luma);

Installation via Node.js

This option is for those who are using a script bundler such as WebPack or Parcel.

Add these to the dependencies section of your package.json, then run npm install:

"@deck.gl/core": "^8.3.7",
"@deck.gl/layers": "^8.3.7",
"@luma.gl/core": "^8.3.1",
"@msrvida/vega-deck.gl": "^3",
"vega": "^5.17.0"

Import these in your JavaScript, then call the use() function to pass the dependency libraries to VegaDeckGl:

import * as deck from '@deck.gl/core';
import * as layers from '@deck.gl/layers';
import * as luma from '@luma.gl/core';
import * as vega from 'vega';
import * as VegaDeckGl from '@msrvida/vega-deck.gl';

VegaDeckGl.use(vega, deck, layers, luma);

Usage

VegaDeckGl.ViewGl uses the same API as Vega's View. In addition to 'canvas' and 'svg', you can now pass 'deck.gl' as the type of the renderer:

var view = new VegaDeckGl.ViewGl(vega.parse(spec))
    .renderer('deck.gl')
    .initialize(document.querySelector('#vis'))
    .run();

Versions

3.3.0 Changes

• Show z-axis scale

3.2.0 Changes

• Fix for animation easing
• Text character set accepts all unicode

3.1.0 Changes

• Added line marks
• Added area marks

Breaking changes in v3

• Stage.TickText now VegaTextLayerDatum type
• View type deleted
• util.isColor function deleted