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.