CODEWITHSUNDEEP
vega-lite
Klaus Eckelt
Klaus Eckelt

Reputation: 685

Sorting rows of a faceted chart in vega lite

Is there some magic to sort sub-charts from a row encoding by the number of items per row?

In this example with the cars dataset, i would want to have USA at the top, because it contains the most items, then Japan, then Europe:

enter image description here

Maybe with the items property of the row header data store?

Upvotes: 0

Views: 863

Answers (1)

Klaus Eckelt
Klaus Eckelt

Reputation: 685

I used aggregate transform to calculate the number of items per Origin and Cylinder and a subsequent join aggregate transformation to sum up the number of items per Origin:

  "transform": [{
      "aggregate": [{"op": "count", "as": "Count"}],
      "groupby": ["Cylinders", "Origin"]
    },
    {
      "joinaggregate": [{"op": "sum", "field": "Count", "as": "OriginCount"}],
      "groupby": ["Origin"]
    }
  ]

I can then display Count on the x-axis as any other data variable and sort the row encoding by the calculated OriginCount:

  "encoding": {
    "row": {
      "field": "Origin", "type": "nominal",
      "sort": { "field": "OriginCount", "order": "descending"}
    },
    "x": {
      "field": "Count", "type": "quantitative"
    },
    ...
]

Giving me the following grouped bar chart: Sorted groped bar char

See in the Vega Editor The full spec for reference:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": { "url": "https://vega.github.io/editor/data/cars.json"},
  "transform": [{
      "aggregate": [{"op": "count", "as": "Count"}],
      "groupby": ["Cylinders", "Origin"]
    },
    {
      "joinaggregate": [{"op": "sum", "field": "Count", "as": "OriginCount"}],
      "groupby": ["Origin"]
    }
  ],
  "mark": {
    "type": "bar",
    "tooltip": true
  },
  "width": 400,
  "encoding": {
    "row": {
      "field": "Origin", "type": "nominal",
      "sort": { "field": "OriginCount", "order": "descending"}
    },
    "x": {
      "field": "Count", "type": "quantitative"
    },
    "y": {
      "field": "Cylinders", "type": "nominal"
    }
  }
}

Upvotes: 1

Related Questions