Sorted Bars

Sort and limit an aggregate bar chart of gold medals by country.

Loading Example... ⏳

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("athletes", "data/athletes.parquet")
]);

const $query = vg.Selection.intersect();

export default vg.vconcat(
  vg.menu({
    label: "Sport",
    as: $query,
    from: "athletes",
    column: "sport",
    value: "aquatics"
  }),
  vg.vspace(10),
  vg.plot(
    vg.barX(
      vg.from("athletes", {filterBy: $query}),
      {
        x: vg.sum("gold"),
        y: "nationality",
        fill: "steelblue",
        sort: {y: "-x", limit: 10}
      }
    ),
    vg.xLabel("Gold Medals"),
    vg.yLabel("Nationality"),
    vg.yLabelAnchor("top"),
    vg.marginTop(15)
  )
);

YAML

meta:
  title: Sorted Bars
  description: >
    Sort and limit an aggregate bar chart of gold medals by country.
data:
  athletes: { file: data/athletes.parquet }
vconcat:
- input: menu
  label: Sport
  as: $query
  from: athletes
  column: sport
  value: aquatics
- vspace: 10
- plot:
  - mark: barX
    data: { from: athletes, filterBy: $query }
    x: { sum: gold }
    y: nationality
    fill: steelblue
    sort: { y: -x, limit: 10 }
  xLabel: Gold Medals
  yLabel: Nationality
  yLabelAnchor: top
  marginTop: 15

JSON

{
  "meta": {
    "title": "Sorted Bars",
    "description": "Sort and limit an aggregate bar chart of gold medals by country.\n"
  },
  "data": {
    "athletes": {
      "file": "data/athletes.parquet"
    }
  },
  "vconcat": [
    {
      "input": "menu",
      "label": "Sport",
      "as": "$query",
      "from": "athletes",
      "column": "sport",
      "value": "aquatics"
    },
    {
      "vspace": 10
    },
    {
      "plot": [
        {
          "mark": "barX",
          "data": {
            "from": "athletes",
            "filterBy": "$query"
          },
          "x": {
            "sum": "gold"
          },
          "y": "nationality",
          "fill": "steelblue",
          "sort": {
            "y": "-x",
            "limit": 10
          }
        }
      ],
      "xLabel": "Gold Medals",
      "yLabel": "Nationality",
      "yLabelAnchor": "top",
      "marginTop": 15
    }
  ]
}