powerbivisualizationpowerbi-desktopvegadeneb

Vega multi-line chart messed up by moving brushed area but works with fold

I have a line chart of temperature values below an overview chart. The overview charts is brushed to select what is shown in the temperature chart.

Each line has its own mark:

marks: [
  { "type": "line", ... max temperature
  { "type": "line", ... avg temperature
  { "type": "line", ... min temperature
]

enter image description here

The problem is if I move the brushed area to the right and then left it seems to change the order of the data points:

enter image description here

The data is filtered on the brush and then transformed using collect>sort - it looks sorted correctly in the data pane. I've found when moving the brushed area to the right works, but then moving it in the opposite direction creates this issue.

If instead I fold the series into key|value columns, it works fine and doesn't have this problem! enter image description here

However I'd like to keep the marks separate if possible since folding introduces some additional issues to do with title and axes becoming bold (perhaps because they are overlaying for each fold).

Solution

  • Add a sort to the top level:

    https://vega.github.io/vega/docs/marks/

    e.g. adding or removing sort changes the connection order of points on a line here:

    {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "background": "white",
  "padding": 5,
  "width": 200,
  "height": 200,
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "url": "data/driving.json",
      "format": {"type": "json", "parse": {"miles": "number"}}
    }
  ],
  "marks": [
    {
      "name": "layer_0_marks",
      "type": "line",
      "sort": {"field": "x"},
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "stroke": {"value": "#4c78a8"},
          "x": {"scale": "x", "field": "miles"},
          "y": {"scale": "y", "field": "gas"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"fields": [{"data": "source_0", "field": "miles"}]},
      "range": [0, {"signal": "width"}],
      "zero": false,
      "nice": true
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"fields": [{"data": "source_0", "field": "gas"}]},
      "range": [{"signal": "height"}, 0],
      "zero": false,
      "nice": true
    }
  ],
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
      "gridScale": "y",
      "grid": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "miles",
      "labelFlush": true,
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(width/40)"},
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "gas",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ]
}