Airship: A New Front-End Library for Location Intelligence Apps

Summary

With Airship, designers and developers can generate styles, interactive elements, typography, and many more design elements optimized specifically for location applications

This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Airship: A New Front-End Library for Location Intelligence Apps

One of several exciting announcements coming out of CARTO Locations Madrid was the launch of Airship CARTO’s new front-end library for Location Intelligence apps. Airship along with CARTO.js 4.0 and the new Developer Center is a part of CARTO’s strategy to empower developers with the tools to build their own custom Location Intelligence applications and solutions to answer today’s varied and complex business questions.

With this library designers and developers can generate styles interactive elements typography and many more design elements optimized specifically for location applications with minimal coding requirements. The library is build with Atomic Design in mind and as such consists of many independent and reusable components that can themselves be combined into more advanced components. Here are some of our favorites:

The Donut Chart

Use the Donut Chart to stylistically visualize categories and values. In widget data and the accompanying legend can be toggled on and off and colors can be adjusted.

Donut Chart

The Gauge Chart

The Gauge Chart is a useful mechanism to both visualize a value and present that value as a percentage of a greater whole. The underlying max value can be adjusted from the default of 100 colors can be adjusted and a label can be added to the shown figure.

Gauge Chart

The Histogram and Stacked Bar Chart

The Histogram component has adjustable colors and can be configured to present selected values on hover.

Histogram

Similarly the Stacked Bar chart provides a method of visualizing data across several categories. The legend can be represented on hover or can be included below the chart itself depending on designer preference.

Stacked Bar Chart

Flags Legends Popups and more!

Airship comes equipped with several components tailored to share important information with users in the most design-conscious way.

Flags along with banners can be used to convey urgent alerts and messages.

Flag

Legends provide extra information on data and can be combined with other components to compose complex visual hierarchies.

Legend

Several types of Popup are available to convey important information on data points within a map.

Popups

Buttons and Switches

The Airship library provides several button and switch types to be used across new Intelligence Applications

Buttons

Toggle

Checkbox

Radio Button

Selectors

Using various selectors users can filter data in different ways adjusting the visualization and powering greater analysis.

Selectors

Range Selector

With Airship we aim to make it easier for developers to integrate beautifully designed components directly into their Location Intelligence applications helping end-users to have more positive intuitive and comfortable experiences.