Airship 2.0 is here

Summary

Explore features, Histogram widget enhancements, Time Series widget, and seamless CARTO VL integration. Elevate your Location Intelligence with Airship 2.0.

This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Airship 2.0 is here

Today we are very happy to announce a new version of Airship our front-end library for building Location Intelligence applications. In this version we focused on bringing more features and fixes to the Histogram widget a brand new Time Series widget and a massive improvement on style customization. To top it all off we've also released a library to simplify connecting CARTO VL with Airship widgets.

VL Bridge

While Airship widgets and CARTO VL can be connected manually we wanted to go one step further and simplify this process. Introducing the Airship VL Bridge a library designed with this idea in mind.

Take the example below for instance. Using the brand new Airship Time Series we want to control a CARTO VL animation: playing and pausing seeking playing back a range and reading back the histogram data.

Airship + VL time series

View this example

Doing this by hand while completely doable requires knowing VL and Airship and takes around 200 lines of code{:target="_blank"}. With our VL Bridge the same can be achieved in about 12{:target="_blank"}.

On this release you will be able to use the bridge with the following Airship widgets:

  • Histogram
  • Time Series
  • Category Widget
  • Range Slider

And we plan to add support to existing and future Airship widgets so stay tuned for future updates.

Be sure to check out the docs and the examples.

New histogram features

We've introduced a number of new features to the histogram. For full details be sure to check out the docs. Here are some of the latest changes:

Categorical Data support

Until now Airship histograms only supported numerical data on the x-axis. Every bucket had a start value and an end value. However CARTO VL offers the possibility of categorical histograms as well. In Airship 2.0 the histogram widget accepts a category value instead of a numerical range.

View this example

Range and Background Data

When binding an Airship histogram widget to a VL Visualization you might want to get some context from your viewport histogram against the whole dataset. There are two new ways of tackling this: the range and backgroundData properties.

The range property is simply an array that lets you define the maximum and the minimum values of your histogram. By specifying this the histogram widget no longer adapts the bar chart height to the highest current value.

View this example

The backgroundData property has been added in tandem with the CARTO VL 1.2 feature - the globalHistogram expression. This property has the exact same structure as data but lets you define another data array that is rendered behind it.

View this example

Axis options

Under the hood we are using d3-axis for the histogram and time series widgets so we have added a property to directly forward axis options to it.

View this example

Customization

When we started Airship brand customization was one of our objectives. This is why the library is powered by CSS Variables. For this release we have added even more variables to every styling element. Now you can still change a few colours and get the theme working but you also have the ability to fine tune every single element.

If you visit our style reference all components now have a list of CSS variables that you can individually set.

We created an example to benchmark this customization by creating a dark theme contrasting with the Airship defaults (you can switch the theme by clicking on the toolbar).

View this example

If you want more details about this release be sure to check out our changelog.