Início / coding / Perguntas / 79597202
Accepted
Jay Askren
Asked: 2025-04-29 03:55:20 +0800 CST

Como usar um menu suspenso para alterar o campo na visualização Vega

  • 772

No Vega ou Vega Lite, quero criar um gráfico de áreas empilhadas onde posso alterar o campo usado para colorir a visualização. Aqui está um exemplo de visualização . Neste exemplo, gostaria de poder alternar entre o agrupamento por "Cilindros", "Potência" e "Aceleração". Esta é uma versão simplificada do que estou tentando fazer, mas ilustra bem o ponto. Tentei definir o campo como um sinal anexado a um menu suspenso, mas isso não parece funcionar:

"fill": {
  "scale": "color_by_cylinders",
  "field": {"signal": "Group_By"}
},

Mesmo que funcionasse, eu ainda precisaria alterar a escala de cores com base no menu suspenso. Também precisaria alterar o campo pelo qual agregamos. Existe alguma maneira de fazer isso no Vega ou no Vega Lite?

{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "autosize": {"type": "fit-x", "contains": "padding"},
  "background": "white",
  "padding": 5,
  "height": 250,
  "style": "cell",
  "data": [
    {"name": "Group_By_store"},
    {
      "name": "source_0",
      "url": "data/cars.json",
      "format": {"type": "json"},
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["Origin", "Cylinders"],
          "ops": ["count"],
          "fields": [null],
          "as": ["__count"]
        },
        {
          "type": "stack",
          "groupby": ["Origin"],
          "field": "__count",
          "sort": {"field": ["Cylinders"], "order": ["descending"]},
          "as": ["__count_start", "__count_end"],
          "offset": "zero"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "width",
      "init": "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
      "on": [
        {
          "update": "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
          "events": "window:resize"
        }
      ]
    },
    {
      "name": "unit",
      "value": {},
      "on": [
        {"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
      ]
    },
    {
      "name": "Group_By",
      "value": null,
      "bind": {
        "input": "select",
        "options": ["Cylinders", "Horsepower", "Acceleration"],
        "labels": ["Cylinders", "Horsepower", "Acceleration"]
      }
    }
  ],
  "marks": [
    {
      "name": "marks",
      "type": "rect",
      "style": ["bar"],
      "interactive": true,
      "from": {"data": "source_0"},
      "encode": {
        "update": {
          "fill": {
            "scale": "color_by_cylinders",
            "field": {"signal": "Group_By"}
          },
          "ariaRoleDescription": {"value": "bar"},
          "description": {
            "signal": "\"Origin: \" + (isValid(datum[\"Origin\"]) ? datum[\"Origin\"] : \"\"+datum[\"Origin\"]) + \"; Number of Cars: \" + (format(datum[\"__count\"], \"\")) + \"; Cylinders: \" + (isValid(datum[\"Cylinders\"]) ? datum[\"Cylinders\"] : \"\"+datum[\"Cylinders\"])"
          },
          "x": {"scale": "x", "field": "Origin"},
          "width": {"signal": "max(0.25, bandwidth('x'))"},
          "y": {"scale": "y", "field": "__count_end"},
          "y2": {"scale": "y", "field": "__count_start"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "source_0", "field": "Origin", "sort": true},
      "range": [0, {"signal": "width"}],
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "source_0",
        "fields": ["__count_start", "__count_end"]
      },
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "color_by_horsepower",
      "type": "ordinal",
      "domain": {"data": "source_0", "field": "Cylinders", "sort": true},
      "range": "category"
    },
    {
      "name": "color_by_acceleration",
      "type": "ordinal",
      "domain": {"data": "source_0", "field": "Cylinders", "sort": true},
      "range": "category"
    },
    {
      "name": "color_by_cylinders",
      "type": "ordinal",
      "domain": {"data": "source_0", "field": "Cylinders", "sort": true},
      "range": "category"
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "Origin",
      "labelAlign": "right",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "Number of Cars",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ],
  "legends": [
    {"fill": "color_by_cylinders", "symbolType": "square", "title": "Cylinders"}
  ],
  "config": {}
}
signals

1 respostas

  1. Best Answer

    Por causa desse problema, a legenda é um pouco problemática. https://github.com/vega/vega/issues/3488

    Existe uma maneira de contornar isso, fazendo o seguinte:

    Link

    {
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "autosize": {"type": "fit-x", "contains": "padding"},
  "background": "white",
  "padding": 25,
  "height": 250,
  "style": "cell",
  "data": [
    {
      "name": "a",
      "url": "data/cars.json",
      "format": {"type": "json"},
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["Origin", "Cylinders"],
          "ops": ["count"],
          "fields": [null],
          "as": ["__count"]
        },
        {
          "type": "stack",
          "groupby": ["Origin"],
          "field": "__count",
          "sort": {"field": ["Cylinders"], "order": ["descending"]},
          "as": ["__count_start", "__count_end"],
          "offset": "zero"
        },
        {"type": "formula", "as": "type", "expr": "'Cylinders'"}
      ]
    },
    {
      "name": "b",
      "url": "data/cars.json",
      "format": {"type": "json"},
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["Origin", "Acceleration"],
          "ops": ["count"],
          "fields": [null],
          "as": ["__count"]
        },
        {
          "type": "stack",
          "groupby": ["Origin"],
          "field": "__count",
          "sort": {"field": ["Acceleration"], "order": ["descending"]},
          "as": ["__count_start", "__count_end"],
          "offset": "zero"
        },
        {"type": "formula", "as": "type", "expr": "'Acceleration'"}
      ]
    },
    {
      "name": "c",
      "url": "data/cars.json",
      "format": {"type": "json"},
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["Origin", "Horsepower"],
          "ops": ["count"],
          "fields": [null],
          "as": ["__count"]
        },
        {
          "type": "stack",
          "groupby": ["Origin"],
          "field": "__count",
          "sort": {"field": ["Horsepower"], "order": ["descending"]},
          "as": ["__count_start", "__count_end"],
          "offset": "zero"
        },
        {"type": "formula", "as": "type", "expr": "'Horsepower'"}
      ]
    },
    {
      "name": "d",
      "source": ["a", "b", "c"],
      "transform": [
        {
          "type": "filter",
          "expr": "Group_By==null?datum.type=='Cylinders':datum.type==Group_By"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "width",
      "init": "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
      "on": [
        {
          "update": "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
          "events": "window:resize"
        }
      ]
    },
    {
      "name": "Group_By",
      "value": null,
      "bind": {
        "input": "select",
        "options": ["Cylinders", "Horsepower", "Acceleration"],
        "labels": ["Cylinders", "Horsepower", "Acceleration"]
      }
    }
  ],
  "marks": [
    {
      "name": "marks",
      "type": "rect",
      "style": ["bar"],
      "interactive": true,
      "from": {"data": "d"},
      "encode": {
        "update": {
          "fill": {
            "signal": "Group_By==null||Group_By=='Cylinders'?scale('dynamicScale',datum.Cylinders):Group_By=='Acceleration'?scale('dynamicScale',datum.Acceleration):scale('dynamicScale',datum.Horsepower)"
          },
          "x": {"scale": "x", "field": "Origin"},
          "width": {"signal": "max(0.25, bandwidth('x'))"},
          "y": {"scale": "y", "field": "__count_end"},
          "y2": {"scale": "y", "field": "__count_start"}
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "band",
      "domain": {"data": "a", "field": "Origin", "sort": true},
      "range": [0, {"signal": "width"}],
      "paddingInner": 0.1,
      "paddingOuter": 0.05
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "a", "fields": ["__count_start", "__count_end"]},
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "Horsepower",
      "type": "ordinal",
      "domain": {"data": "d", "field": "Horsepower", "sort": true},
      "range": "category"
    },
    {
      "name": "Acceleration",
      "type": "ordinal",
      "domain": {"data": "d", "field": "Acceleration", "sort": true},
      "range": "category"
    },
    {
      "name": "dynamicScale",
      "type": "ordinal",
      "domain": {"signal": "Group_By==null||Group_By=='Cylinders'?   sort(pluck(data('d'),'Cylinders')):Group_By=='Acceleration'?   sort(pluck(data('d'),'Acceleration')):   sort(pluck(data('d'),'Horsepower')) "},
      "range": "category"
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "Origin",
      "labelAlign": "right",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "Number of Cars",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ],
  "legends": [
    {"fill": "dynamicScale", "symbolType": "square"}
  ],
  "config": {}
}
    • 1

relate perguntas