Search code examples
jsonchartsvisualizationvega-lite

Why is the total field for this bar chart not encoded into the correct x axis position on this vega lite spec?

I'm trying to show the bar chart total count along this chart (vega-lite editor) but the labels don't seem to be positioned in the correct location across the x axis. They are all at the 1 position.

This is the encoding I'm using for the text marks:

{
  "mark": {
    "type": "text",
    "fill": "#000",
    "align": "left",
    "dx": 8,
    "text": {
      "expr": "format(datum.chartPageElementAxisYGroupTotal, '.0f')"
    }
  },
  "encoding": {
    "x": {
      "field": "chartPageElementAxisYGroupTotal"
    }
  }
}

chart with buggy total count position

What's the problem? Is there a better way to do this with vega-lite?

Solution

  • Try this.

    Your distinct count for Fan Art looks incorrect but I don't understand what your data or what you're trying to show.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "values",
    "values": [
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 10,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 0,
        "chartPageElementGroupBy": "Todo",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "selgGm64Ff1e8J37j"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 35,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 75,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 40,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 50,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 60,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 50,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 60,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 75,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 70,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 90,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 80,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 95,
        "chartPageElementGroupBy": "In progress",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "seluE9qqH46v8lQA0"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Game Teaser Trailer",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Game Teaser Trailer",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Developer Spotlight",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Developer Spotlight",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Fan Art Showcase",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Fan Art Showcase",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Another one",
        "chartPageElementAxisY": 100,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Another one",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      },
      {
        "chartPageElementAxisX": "Another one",
        "chartPageElementAxisY": 30,
        "chartPageElementGroupBy": "Done",
        "chartPageElementAxisXCellValue": "Another one",
        "chartPageElementGroupByCellValue": "selE1mGov43Ig1033"
      }
    ]
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "x": {
          "field": "chartPageElementAxisY",
          "type": "quantitative",
          "aggregate": "distinct",
          "axis": {"title": "", "domain": false}
        },
        "y": {
          "field": "chartPageElementAxisX",
          "type": "nominal",
          "axis": {"title": "", "grid": false, "ticks": false},
          "sort": "ascending"
        },
        "tooltip": [
          {"field": "chartPageElementAxisX", "title": "Project"},
          {
            "field": "chartPageElementAxisYGroupTotal",
            "type": "quantitative",
            "title": "Total"
          },
          {
            "field": "chartPageElementGroupBy",
            "title": "Status",
            "type": "nominal"
          },
          {
            "field": "chartPageElementAxisY",
            "type": "quantitative",
            "aggregate": "distinct",
            "title": "Distinct: Progress",
            "format": {"isAggregationData": false, "numberFormat": " .0f"},
            "formatType": "number"
          }
        ],
        "color": {
          "field": "chartPageElementGroupBy",
          "title": "Status",
          "type": "nominal"
        },
        "order": {"field": "groupByOrder"}
      }
    },
    {
      "mark": {
        "type": "text",
        "fill": "#000",
        "align": "left",
        "dx": 8,
        "text": {"expr": "format(datum.chartPageElementAxisYGroupTotal, '.0f')"}
      },
      "transform": [
        {
          "aggregate": [
            {
              "op": "distinct",
              "field": "chartPageElementAxisY",
              "as": "chartPageElementAxisYGroupTotal"
            }
          ],
          "groupby": ["chartPageElementAxisX"]
        }
      ],
      "encoding": {
        "x": {
          "field": "chartPageElementAxisYGroupTotal",
          "type": "quantitative"
        },
        "y": {
          "field": "chartPageElementAxisX",
          "type": "nominal",
          "axis": {"title": "", "grid": false, "ticks": false},
          "sort": "ascending"
        }
      }
    }
  ],
  "transform": [
    {
      "calculate": "if(datum.chartPageElementGroupBy === \"In progress\", 3,if(datum.chartPageElementGroupBy === \"Done\", 2,if(datum.chartPageElementGroupBy === \"Todo\", 1, 0)))",
      "as": "groupByOrder"
    }
  ],
  "height": 300,
  "width": 553
}