javascript - 使用JSON和Vega-lite在散点图上绘制多个点(plotting multiple points on scatterplot using JSON and Vega-lite)

Question

I am trying to create a scatterplot using webservice API endpoints provided by my university and Vega-lite visualization library.

(我正在尝试使用我的大学和Vega-lite可视化库提供的Web服务API端点创建散点图。)

The goal is to have hour of day plotted on the x-axis and the count of instances on the y axis by using the following.

(目标是使用以下方法在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"}
  }
}

I have tried to follow several examples found online and have only able to figure out how to plot one point at a time using the above code or manually input each point on the graph, however doing it manually is not an option for my purposes.

(我尝试遵循在线找到的几个示例，并且只能使用上面的代码弄清楚如何一次绘制一个点，或者手动在图形上输入每个点，但是出于我的目的，手动选择不是一种选择。)

My JSON file looks is as follows where the hours of day are represented by 0-23 and count of each instance is right next to it.

(我的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}

I have been trying to figure this out for a while and need some help going in the right direction

(我一直试图弄清楚这一点，并且需要一些帮助，朝着正确的方向发展)

  ask by bguerra translate from so

Answer 1

Data in vega-lite is expected to be specified as a list of records;

(vega-lite中的数据应指定为记录列表；)

eg rather than

(例如而不是)

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

it should be

(它应该是)

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

If your data source cannot be modified, it is possible to use the fold transform to reshape your data.

(如果您的数据源无法修改，则可以使用fold变换来重塑数据。)

It would look something like this ( view in vega editor ):

(看起来像这样（ 在vega编辑器中查看 ）：)

{
  "$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"}
  }
}

Unfortunately, there's no way to fold data like this without explicitly listing all the entries to be folded.

(不幸的是，如果不显式列出所有要折叠的条目，就无法折叠这样的数据。)