Vega-Lite: Comet chart trails travel along both axes, when it should only travel horizontally

Question

I am creating some visualisations using Vega-Lite on a dataset containing electoral data from Malaysia, specifically a dataset of the seats won by each party in each state, in the 14th election and the 15th election. Here is the link to the dataset.

I would like to implement a comet chart that shows changes between the two elections for this, similar to the one exhibited in Vega-Lite's example gallery.

I wrangled my electoral dataset to match the structure of the barley dataset used in the example. For clarity, states should be along the y-axis, and elections should be along the x-axis, with one column for each party along the x-axis. So election replaces year, state replaces variety, party replaces site and seats replaces yield.

After making the relevant changes to the template code, I get the following

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "https://raw.githubusercontent.com/botsunny/FIT3179-Viz-2/main/data/wrangled_ge14_15.csv"},
  "title": "Change in seats by state among major coalitions from GE14 to GE15",
  "transform": [
    {"pivot": "election", "value": "seats", "groupby": ["state", "party"]},
    {"fold": ["14", "15"], "as": ["election", "seats"]},
    {"calculate": "toNumber(datum.election)", "as": "election"},
    {"calculate": "datum['15'] - datum['14']", "as": "delta"}
  ],
  "mark": "trail",
  "encoding": {
    "x": {"field": "election", "title": null},
    "y": {"field": "state", "title": "state"},
    "size": {
      "field": "seats",
      "type": "quantitative",
      "scale": {"range": [0, 15]},
      "legend": {"values": [5, 15]},
      "title": "Seats won"
    },
    "tooltip": [{"field": "election", "type": "quantitative"}, {"field": "seats"}],
    "color": {
      "field": "delta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Change in seats"
    },
    "column": {"field": "party", "title": "Coalation"}
  },
  "view": {"stroke": null},
  "config": {"legend": {"orient": "bottom", "direction": "horizontal"}}
}

The resulting visualisation, however, looks like this (currently do not have enough reputation to post images): https://i.sstatic.net/fnDhl.png

Here is my code in the Vega Editor.

The comet trails seem to be going vertically as well as horizontally. I am quite new to Vega-Lite and have tried playing around to debug this problem to no avail. Any help is appreciated!

What I tried: swapping x and y encodings, pivoting and folding from different variables, adjusting scales

What I expected to happen: a comet chart similar to the one in Vega's gallery

What actually resulted: a chart with vertical trails and missing horizontal trails as described above

Answer 1

Your spec worked correctly when using the newSeats column in your csv file.

The discrepancy you're observing arises due to the fact that the seats field has values which are integers (0, 1, 2,...) while the newSeats field has floating-point values (e.g., 8.006866286, 18.00058588, ...).

The Vega-Lite "trail" mark type creates a continuous trail, and its behavior can be influenced by the nature of the data you provide. When you use integer values from the seats column, the trails might not be continuous or as you expect them to be.

So we can simply "correct" seats by adding a small jitter or random noise

{"calculate": "toNumber(datum.seats) + random()*0.01", "as": "Seats"},

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://raw.githubusercontent.com/botsunny/FIT3179-Viz-2/main/data/wrangled_ge14_15.csv"
  },
  "title": "Change in seats by state among major coalitions from GE14 to GE15",
  "transform": [
    {"calculate": "toNumber(datum.seats) + random()*0.01", "as": "Seats"},
    {"pivot": "election", "value": "Seats", "groupby": ["state", "party"]},
    {"fold": ["15", "14"], "as": ["election", "Seats"]},
    {"calculate": "datum['15'] - datum['14']", "as": "delta"}
  ],
  "width": 100,
  "mark": "trail",
  "encoding": {
    "x": {"field": "election", "title": null},
    "y": {"field": "state", "title": "state"},
    "size": {
      "field": "Seats",
      "type": "quantitative",
      "scale": {"range": [0, 20]},
      "legend": {"values": [1, 20]},
      "title": "Seats won"
    },
    "tooltip": [
      {"field": "election", "type": "quantitative"},
      {"field": "Seats"}
    ],
    "color": {
      "field": "delta",
      "type": "quantitative",
      "scale": {"domainMid": 0},
      "title": "Change in seats"
    },
    "column": {"field": "party", "title": "party"}
  },
  "view": {"stroke": null},
  "config": {"legend": {"orient": "bottom", "direction": "horizontal"}}
}