有没有人解释为什么这张图是在 vega 上制作的？

Question

我正在尝试用 vegalite 制作图表，以此显示股票价格随时间的演变。直觉上这应该很容易，但出于某种原因，似乎只有两条线得到输出，它们根本不反映股票价格。我的数据有问题还是我遗漏了一些非常基本的东西？

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": {
    "text": "Cases: UK nations",
    "subtitle": [
      "New cases by publish date, rolling rate"
     
    ],
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "background": "whitesmoke",
  "width": 800,
  "height": 600,
  "data": {
    "url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
  "format": {"type": "csv"}},
  "layer": [
    {
      "encoding": {
        "x": {"field": "Date", "type": "temporal"},
        "y": {"field": "Open", "type": "quantitative"},
        "color": {
          "field":"Stockname",
           "type": "nominal"
           }
      },
      "layer": [
        {"mark": "line"},
        {
          "params": [
            {
              "name": "label",
              "select": {
                "type": "point",
                "encodings": ["x"],
                "nearest": true,
                "on": "mouseover"

              }
            }
          ],
          "mark": "point",
          "encoding": {
            "opacity": {
              "condition": {"param": "label", "empty": false, "value": 1},
              "value": 0
            }
          }
        }
      ]
    },
    {
      "transform": [{"filter": {"param": "label", "empty": true}}],
      "layer": [
        {
          "mark": {"type": "rule", "color": "grey"},
          "encoding": {
            "x": {"type": "temporal", "field": "Date", "aggregate": "min"}
          }
        },
        {
          "encoding": {
            "text": {"type": "quantitative", "field": "Open"},
            "x": {"type": "temporal", "field": "Date", "title": "Month"},
            "y": {
              "type": "quantitative",
              "field": "Open",
              "title": "Price"
            }
          },
          "layer": [
            {
              "mark": {
                "type": "text",
                "stroke": "white",
                "strokeWidth": 0.5,
                "align": "left",
                "dx": 5,
                "dy": -5
               
              }
            },
            {
              "mark": {"type": "text", "align": "left", "dx": 5, "dy": -5},
              "encoding": {"color": {"type": "quantitative"}}
            }
          ]
        }
      ]
    }
  ],
  "config": {}
}

Answer 1

您的四只股票具有相同的数据，因此线条隐藏在最后绘制的一只下方。您可以通过对数据集进行分面来查看：

{
  "data": {
    "url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
    "format": {"type": "csv", "parse": {"Date": "date:'%d/%m/%Y'"}}
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Open", "type": "quantitative"},
    "facet": {"field": "Stockname", "type": "nominal", "columns": 3}
  }
}

注意数据格式的 parse 参数；这是正确解析日期条目所必需的（如中所述）。

有没有人解释为什么这张图是在 vega 上制作的？

Does anyone have an explanation as to why this graph is being made on vega?

json

vega

vega-lite