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.
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.
Rect elements can be rendered as 3D cuboids. To do this, add "z"
/ "depth"
encodings where you normally use "x"
/ "width"
and "y"
/ "height"
.
You will need to consider how to load the libraries that vega-deck.gl
depends on, based on your build & deployment scenario.
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);
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);
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();
- Show z-axis scale
- Fix for animation easing
- Text character set accepts all unicode
- Added line marks
- Added area marks
Stage.TickText
nowVegaTextLayerDatum
typeView
type deletedutil.isColor
function deleted