Search code examples
jsonvisualizationvega-litevega

Breaking axis to keep view readable in vega-lite


I need to provide a bar plot of measures, some of them providing very high measures compared to the others. In order to keep readable the bar plot, i attempted to use log scale, and to add a filter-outlier step before the plotting.

I then wanted to experiment an axis break, letting a large chunk of y values to be "hidden".

Since i didn't found any way to do axis breaks in vega, i tried to use the repeat system to get two consecutive graphs, each showing the relevant portions of the Y axis using scale domain:

{
    "data": {
        "values": [{"n": "A", "v": 1}, {"n": "B", "v": 3}, {"n": "C", "v": 170000000}, {"n": "D", "v": 11}]
    },
    "repeat": {
        "slice": [ [0, 20], [150000000, 200000000] ]
    },
    "mark": {"type": "bar", "clip": true},
    "encoding": {
        "x": {"field": "n", "type": "nominal"},
        "y": {"field": "v", "type": "quantitative", "scale": {"domain": {"repeat": "slice"}}}
    }
}

This yield a Uncaught (in promise) TypeError: e is undefined. I feel like i'm using too freely the repeat system.

  • how can i make the repeat behave as expected ?
  • is there any mean do or emulate axis breaks in vega ?
  • what else can i do to keep my bar plot readable ?

Solution

  • What about a simple vertical concat and apply a transform filter for each concat:

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"n": "A", "v": 1},
          {"n": "B", "v": 3},
          {"n": "C", "v": 170000000},
          {"n": "D", "v": 11}
        ]
      },
      "vconcat": [
        {
          "transform": [{"filter": "datum.v <= 50"}],
          "mark": "bar",
          "encoding": {
            "y": {"field": "n", "type": "nominal"},
            "x": {"field": "v", "type": "quantitative"}
          }
        },
        {
          "transform": [{"filter": "datum.v > 50"}],
          "mark": "bar",
          "encoding": {
            "y": {"field": "n", "type": "nominal"},
            "x": {"field": "v", "type": "quantitative"}
          }
        }
      ]
    }