Román Jiménez • Apr 1, 2019

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.

View this example

Doing this by hand, while completely doable, requires knowing VL and Airship, and takes around 200 lines of code. With our VL Bridge, the same can be achieved in about 12.

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.

About the author

Front-End Engineer at CARTO.

More posts from Román Jiménez