Marks are the essential building blocks of any data visualization in Vega-Lite. They act as the shapes and symbols (like bars, lines, points) that represent your data visually. By setting properties such as position, size, and color, you can effectively communicate information and patterns from your dataset.

// Single View Specification in Vega-Lite
{
  "data": ... ,
  "mark": ... ,       // mark definition goes here
  "encoding": ... ,
}

What Are Mark Types?

Think of mark types as the different shapes you can use to represent your data. Vega-Lite offers various primitive mark types:

• Basic Marks: area, bar, circle, line, point, rect, rule, square, text, tick, geoshape
• Composite Marks: boxplot, errorband, errorbar (include multiple primitive marks for complex visuals)

For example, if you want to create a bar chart, you set the mark property to "bar":

{
  "data": { "values": [...] },
  "mark": "bar",
  "encoding": { ... }
}

Simple, right? But there’s a lot more you can customize!

Customizing Marks with a Mark Definition Object

When you need more control, use a mark definition object to customize properties:

{
  "data": { "values": [...] },
  "mark": { "type": "point", "color": "red", "size": 100 },
  "encoding": { ... }
}

This snippet creates a visualization where data points are shown as large red circles.

General Mark Properties

Here are some general properties you can adjust:

• type: Type of mark (like bar, point).
• color: Color of the mark.
• size: Size of the mark (where applicable).

Position and Offset Properties

These properties help you place your marks accurately:

• x, y: Positions along the horizontal and vertical axes.
• xOffset, yOffset: Offsets from the primary positions.

Color Properties

Color isn’t just for aesthetics. It can encode additional data:

• fill: Background color.
• stroke: Border color.
• opacity: Transparency level.

Stroke Style Properties

Define how lines around marks appear:

• strokeWidth: Width of the line.
• strokeDash: Pattern of dashes and gaps.

Example of using a stroke dash:

{
  "mark": {
    "type": "line",
    "strokeDash": [6, 4] // 6 pixels dash, 4 pixels gap
  }
}

Hyperlink Properties

Marks can also act as hyperlinks:

• href: URL the mark should link to.
• cursor: Changes to "pointer" when href is specified, indicating a hyperlink.

{
  "mark": "point",
  "encoding": {
    "href": { "value": "https://example.com" }
  }
}

Configuring Marks

Want to set default styles across the entire chart?

// Top-level View Specification
{
  "config": {
    "mark": {
      "color": "blue"
    }
  }
}

You can also specify configurations for individual mark types, for example, bars:

{
  "config": {
    "bar": {
      "cornerRadius": 5
    }
  }
}

Using Named Styles

You can define custom styles using the style property:

{
  "config": {
    "style": {
      "triangle": {
        "shape": "triangle-up",
        "strokeWidth": 2
      }
    }
  }
}

Use this style like this:

{
  "mark": {
    "type": "point",
    "style": "triangle"
  }
}

Example: Styling Labels

Want to add labels that complement other marks? Use the text mark type and style configurations:

{
  "data": { "values": [...] },
  "layer": [
    {
      "mark": "bar",
      "encoding": { ... }
    },
    {
      "mark": {
        "type": "text",
        "dx": 5,
        "dy": -5,
        "align": "right",
        "baseline": "middle",
        "color": "black"
      },
      "encoding": { ... }
    }
  ]
}

FAQ

What are the basic mark types in Vega-Lite?

The basic mark types include area, bar, circle, line, point, rect, rule, square, text, tick, and geoshape.

How can I customize mark properties?

You can customize mark properties by using a mark definition object and setting properties like type, color, size, fill, stroke, and more.

Can marks be used as hyperlinks in Vega-Lite?

Yes, by setting the href property in the mark definition, you can create hyperlinks. The cursor typically changes to "pointer" to indicate the hyperlink.

Now you’re ready to create stunning visuals using marks in Vega-Lite! Happy visualizing!