Legible Label Layout for Data Visualization, Algorithm and Integration into Vega-Lite

Abstract

Legible labels should not overlap with other labels and other marks in a chart. When a chart contains a large number of data points, manually positioning these labels for each data point in the chart is a tedious task. A labeling algorithm is necessary to automatically layout the labels for a chart with a large number of data points. The state-of-the-art labeling algorithm detects overlaps using a set of points to approximate each mark's shape. This approach is inefficient for large marks or many marks as it requires too many points to detect overlaps. In response, we present a bitmap-based label placement algorithm, which leverages an occupancy bitmap to accelerate overlap detection. To create an occupancy bitmap, we rasterize marks onto a bitmap based on the area they occupy in the chart. With the bitmap, we can efficiently place labels without overlapping existing marks, regardless of the number and geometric complexity of the marks. This bitmap-based algorithm offers significant performance improvements over the state-of-the-art approach while placing a similar number of labels. We also integrate this algorithm into Vega-Lite as one of its encoding channels, label encoding. Label encoding allows users to encode fields in each data point with a text label to annotate the mark that represents the data point in a chart.