vega / vega

A visualization grammar.

Home Page:https://vega.github.io/vega

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

interactively sorted data table is no longer sorted in line chart

doc0815 opened this issue · comments

I modified the line chart example and included an interactive filter. After filtering, the data gets aggregated and sorted by x values (that will be displayed on the x-axis). Although the data table is sorted as shown in the data viewer, the line chart is messy. Do I miss something in my chart specification?

Screenshots taken from Vega Editor 5.25.0

image image
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic line chart example.",
  "width": 500,
  "height": 200,
  "padding": 5,

  "signals": [
    {
      "name": "objectSelect",
      "value": "ALL",
      "bind": {
        "input": "select",
        "options": [
          "ALL",
          "A",
          "B"
        ]
      }
    }
  ],

  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "obj": "A"}, {"x": 0, "y": 20, "obj": "B"},
        {"x": 11, "y": 43, "obj": "A"}, {"x": 1, "y": 35, "obj": "B"},
        {"x": 2, "y": 81, "obj": "A"}, {"x": 2, "y": 10, "obj": "B"},
        {"x": 3, "y": 19, "obj": "A"}, {"x": 3, "y": 15, "obj": "B"},
        {"x": 4, "y": 52, "obj": "A"}, {"x": 4, "y": 48, "obj": "B"},
        {"x": 15, "y": 24, "obj": "A"}, {"x": 5, "y": 28, "obj": "B"},
        {"x": 6, "y": 87, "obj": "A"}, {"x": 6, "y": 66, "obj": "B"},
        {"x": 7, "y": 17, "obj": "A"}, {"x": 7, "y": 27, "obj": "B"},
        {"x": 8, "y": 68, "obj": "A"}, {"x": 8, "y": 16, "obj": "B"},
        {"x": 9, "y": 49, "obj": "A"}, {"x": 9, "y": 25, "obj": "B"}
      ]
    },
    {
      "name": "tableFinal",
      "source": "table",
      "transform": [
        {
          "type": "filter",
          "expr": "objectSelect!='ALL' ? datum.obj==objectSelect : true"
        },
        {
          "type": "aggregate",
          "groupby": ["x"],
          "fields": ["y"],
          "ops": ["sum"],
          "as": ["y"]
        },
        {
          "type": "collect",
          "sort": {"field": "x"}
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "tableFinal", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "tableFinal", "field": "y"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],

  "marks": [
    {
      "type": "line",
      "from": {"data": "tableFinal"},
      "encode": {
        "update": {
          "x": {"scale": "x", "field": "x"},
          "y": {"scale": "y", "field": "y"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}

Imputing missing value to create a regular data set before filtering and aggregation shadows this problem.

        {
          "type": "impute",
          "groupby": ["obj"],
          "key": "x",
          "field": "y"
        },