使用 JSON 和 Vega-lite 在散点图上绘制多个点

Question

我正在尝试使用我的大学和 Vega-lite 可视化库提供的网络服务 API 端点创建散点图。目标是使用以下方法在 x 轴上绘制一天中的小时数，在 y 轴上绘制实例数。

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
  "mark": "point",
  "encoding": {
    "x": {"field": "0", "type": "quantitative"},
    "y": {"field": "1", "type": "quantitative"}
  }
}

我已尝试按照网上找到的几个示例进行操作，但只能弄清楚如何使用上述代码一次绘制一个点或手动输入图表上的每个点，但是手动操作不是一种选择为了我的目的。我的 JSON 文件看起来如下，其中一天中的小时由 0-23 表示，每个实例的计数就在它旁边。

{"0":429,"1":231,"2":130,"3":85,"4":42,"5":1,"7":1,"8":17,"9":16,"10":795,"11":425,"12":921,"13":846,"14":1795,"15":1789,"16":2119,"17":1630,"18":1942,"19":1637,"20":1636,"21":1054,"22":843,"23":710}

我已经尝试解决这个问题一段时间了，在正确的方向上需要一些帮助

Answer 1

vega-lite中的数据应该指定为记录列表；例如而不是

{"0":429,"1":231,"2":130}

应该是

[{"x": "0", "y": 429}, {"x": "1", "y": 231}, {"x": "2", "y": 130}]

如果您的数据源无法修改，可以使用fold transform to reshape your data. It would look something like this (view in vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
  "transform": [
    {
      "fold": ["0", "1", "2", "3", "4", "5", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
      "as": ["x", "y"]
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

不幸的是，如果不明确列出要折叠的所有条目，就无法像这样折叠数据。

使用 JSON 和 Vega-lite 在散点图上绘制多个点

plotting multiple points on scatterplot using JSON and Vega-lite

javascript

json

vega

vega-lite