How Can I Use Trail Marks to Visualize Data with Changing Sizes?

Have you ever wanted to create a line chart where the thickness of the line changes according to the data? The trail mark in Vega-Lite is here to help you do just that! It's similar to the line mark but offers the added advantage of variable widths.

What is a Trail Mark?

A trail mark represents data points connected by a line, where the thickness of the line can vary based on the underlying data. This is a fantastic way to show variations and trends more dynamically.

{
  "data": ... ,
  "mark": "trail",
  "encoding": ... ,
  ...
}

Key features:

Connects data points with a line
Variable thickness (unlike standard lines)
Uses fill for color (not stroke)

When to Use a Trail Mark?

Use trail marks when you need to convey additional information using the width of the connecting lines. For example:

Showing traffic volume trends where the line thickness increases with higher volumes.
Visualizing changes in stock prices with varying transaction volumes.

Getting Started with Trail Marks

Basic Example

Want to see a trail mark in action? Let's create a simple line chart where the line width varies with the data.

{
  "data": {
    "values": [
      {"x": 1, "y": 5, "size": 10},
      {"x": 2, "y": 10, "size": 20},
      {"x": 3, "y": 7, "size": 15}
    ]
  },
  "mark": "trail",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "size": {"field": "size", "type": "quantitative"}
  }
}

Advanced Example: Comet Chart

Want to get a bit more creative? How about a comet chart to show transitions between two states?

{
  "data": {
    "values": [
      {"start": 1, "end": 5, "size": 10},
      {"start": 2, "end": 10, "size": 20},
      {"start": 3, "end": 7, "size": 15}
    ]
  },
  "mark": "trail",
  "encoding": {
    "x": {"field": "start", "type": "quantitative"},
    "x2": {"field": "end"},
    "size": {"field": "size", "type": "quantitative"}
  }
}

Configuring Trail Marks

You can also set default properties for all trail marks using the top-level config object in Vega-Lite.

{
  "config": {
    "trail": {
      "color": "blue",
      "size": 5
    }
  }
}

These defaults apply unless they are overridden by specific mark properties.

FAQ

Q1: Can I change the color of the trail mark?

Yes! You can change the color using the fill property in your encoding or config.

"encoding": {
  "color": {"value": "red"}
}

Q2: Can I use different interpolation methods with trail marks?

No, trail marks do not support different interpolation methods. They use straight connections between data points.

Q3: How do I override default trail configurations?

You can override them in your mark property encoding. For example, if your config sets a default color but you want a specific trail to be blue, just specify it in the encoding.

"mark": {
  "type": "trail",
  "color": "blue"
}

Now you're all set to create stunning and dynamic visualizations using trail marks! Dive in and experiment to see what insights you can uncover.

Tick Overview