Hide a mark based on a condition

huangapple go评论126阅读模式
英文:

Hide a mark based on a condition

问题

{
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
},
{
"mark": "rule",
"encoding": {
"y": {"field": "price", "aggregate": "mean"},
"size": {"value": 2},
"color": {"field": "symbol"}
}
}
}
}

英文:

I'm wondering if it's possible to show just one of the marks based on a condition or something that is fed by a parameter dynamically.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"}
      }
    }
  ]
}

I want to create a parameter where a user is able to select one of the two values "line" or "rule." Based on the selection one of the two marks is shown, and the other is hidden.

The data does not change.

答案1

得分: 2

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/stocks.csv"},
"params": [
{
"name": "choice",
"value": "rule",
"bind": {"input": "radio", "options": ["rule", "line"]}
}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"},
"opacity": {
"condition": {"test": "choice == 'rule'", "value": 0},
"value": 1
}
}
},
{
"mark": "rule",
"encoding": {
"y": {"field": "price", "aggregate": "mean"},
"size": {"value": 2},
"color": {"field": "symbol"},
"opacity": {
"condition": {"test": "choice == 'line'", "value": 0},
"value": 1
}
}
}
]
}

英文:

Here you go.

Hide a mark based on a condition

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "params": [
    {
      "name": "choice",
      "value": "rule",
      "bind": {"input": "radio", "options": ["rule", "line"]}
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"},
        "opacity": {
          "condition": {"test": "choice == 'rule'", "value": 0},
          "value": 1
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"},
        "opacity": {
          "condition": {"test": "choice == 'line'", "value": 0},
          "value": 1
        }
      }
    }
  ]
}

huangapple
  • 本文由 发表于 2023年3月21日 01:47:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793625-3.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定