Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

These docs are for Looking for an old version?

Introduction is designed to make visualization of large data sets simple. It enables users to quickly get impressive visual results with limited effort through composition of existing layers, while offering a complete architecture for packaging advanced WebGL based visualizations as reusable JavaScript layers.

Brief Overview

The basic idea of using is to render a stack of visual overlays, usually (but not always) over maps.

To make this simple concept work, handles a number of challenges:

  • Handling of large data sets and performant updates
  • Interactive event handling such as picking
  • Cartographic projections and integration with underlying map
  • A catalog of proven, well-tested layers
  • Easy to create new layers or customize existing layers

Ecosystem is one of the main frameworks in the framework suite. has been developed in parallel with a number of companion modules, e.g.:

  • - A general purpose WebGL library designed to be interoperable both with the raw WebGL API and (as far as possible) with other WebGL libraries. In particular, does not claim ownership of the WebGL context, and can work with any supplied context, including contexts created by the application or other WebGL libraries.
  • react-map-gl - A React wrapper around Mapbox GL which works seamlessly with
  • - A high-performance feature editing framework for


How you approach learning will depend on your previous knowledge and how you want to use it.

Getting familiar with the various layers and their props, and reading the basic articles in the developer guide should of course be one of the first steps.

Exploring the examples is a good starting point.

In-depth tutorials for how to develop applications are available on the Vis Academy website.

And our blog contains a lot of additional information that might be helpful.

But where to go after that?

Learning Reactive UI Programming is designed according to functional UI programming principles, made fashionable by frameworks like React. The key to writing good, performant applications and layers lies in knowing how to minimize updates and redundant calculations, understanding concepts like "shallow equality" etc. This is critical when using with React, but can still be helpful to understand when using in non-React contexts.

There is an impressive amount of information (documentation, blog posts, educational videos, etc.) on the reactive programming paradigm in relation to modern web frameworks such as React, Flux and Redux. Where to start depends mostly on your application architecture choices. Exploring such information will take you beyond what we can cover in the basic developer guide article on Updates.

Understanding WebGL

Knowledge of WebGL is only needed if you want to create custom layers in Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing layers (including modifying the shader code) with a surprisingly limited amount of WebGL knowledge.

There are many web resources for learning WebGL. can be a good start.