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

Question

I am trying to create a scatterplot using webservice API endpoints provided by my university and Vega-lite visualization library. 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.

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

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

Answer 1

Data in vega-lite is expected to be specified as a list of records; 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. 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"}
  }
}

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