Deneb & Vega-Lite Walkthrough Series | EP02: MARK TYPES📊

Marks are the core building blocks for chart development. In this article we will take a little dip into the different mark types available🕊️ 🧙🏼‍♂️✨

A selection of marks

💌 PBIX file available at the end of the article… Enjoy!

Mark Types

There is a lot to learn in Vega-Lite, and it can be difficult to know where to start. In Episode 1 on my Vega-Lite series we looked at encoding a bar mark, but there many other mark types we can use to start creating some magic! 💫

There are two broad categories of marks, primitive marks and composite marks. Primitive marks represent the simplest forms of visual elements — i.e. the geometric shape. Composite marks are higher-level abstractions which incorporate multiple primitive marks. They are usually tailored for specific types of visualisation. For the most part, primitive marks will be more than enough for our needs.

Coding our marks is super easy — take a look at the general format below. You have two parts: the mark object, and the mark type attribute:

{
  "data": {"name": "dataset"},
  "encoding": {
    "y": {...},
    "x": {...}
  },
  "layer": [
    {
      "mark": {          // open mark object
        "type": "bar"      // assign mark type
      }                  // close mark object
    }
  ]
}

And for illustrative purposes, a more comprehensive list:

{
  "data": {"name": "dataset"},
  "encoding": {
    "y": {...},
    "x": {...}
  },
  "layer": [
    {
      "mark": {
        // here are a list of primitive mark types
        "type": "bar",    
        "type": "area",
        "type": "line",
        "type": "rect",
        "type": "trail",
        "type": "arc",
        "type": "rule",
        "type": "circle",
        "type": "square",
        "type": "point",
        "type": "tick",
        "type": "geoshape",
        
        // a list of composite marks (complex, multi-layered marks)
        "type": "errorband",
        "type": "errorbar",
        "type": "boxplot"
      }
    }
  ]
}

From Marks to Charts

Now we know how to change marks shapes, we can go one step further by translating these shapes into charts — the form of data which can be visually analysed and understood. Let’s take a look at 5 such examples:

Column Chart

Column chart

// note: the code is abbreviated and annotated for effect
{
  "data": {"name": "dataset"},
  "encoding": {
    "y": { "field": "AC" },          // axis on the left
    "x": { "field": "EndOfMonth" }   // axis on the bottom
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "#0000FF"
      }
    }
  ]
}

Bar Chart

Bar chart

// note: the code is abbreviated and annotated for effect
{
  "data": {"name": "dataset"},
  "encoding": {
    "x": { "field": "AC" },          // now switched axis on the bottom
    "y": { "field": "EndOfMonth" }   // and axis on the left
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "#0000FF"
      }
    }
  ]
}

Line Chart

// note: the code is abbreviated and annotated for effect
{
  "data": {"name": "dataset"},
  "encoding": {
    "y": { "field": "AC" },          // now switched axis on the bottom
    "x": { "field": "EndOfMonth" }   // and axis on the left
  },
  "layer": [
    {
      "mark": {
        "type": "line",
        "point": "true",
        "color": "#0000FF"
      }
    }
  ]
}

Area Chart

Area Chart

// note: the code is abbreviated and annotated for effect
{
  "data": {"name": "dataset"},
  "encoding": {
    "y": { "field": "AC" },          // axis on the left
    "x": { "field": "EndOfMonth" }   // axis on the bottom
  },
  "layer": [
    {
      "mark": {
        "type": "area",
        "color": "#0000FF"
      }
    }
  ]
}

Scatter Plot

Scatter Plot

// note: the code is abbreviated and annotated for effect
{
  "data": {"name": "dataset"},
  "encoding": {
    "x": { "field": "AC" },   // axis on the bottom
    "y": { "field": "QTY" }   // axis on the left
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "#0000FF"
      }
    }
  ]
}

Thank you for staying to the end of the article… I hope you find it useful 😊. Join me on the next episode where things are going to get a lot more technical! 😏🧙‍♂️🪄

🔗Github link to PBIX: EP02 — Mark Types PBIX