How to plot multiple lines one for each element of an array contains y values in vega spec data?

Question

I'm using vega and D3 to plot dynamic data set against time, (say multiple sensor values against time in x-axes). In my spec, data element having values as x and y where x is time-stamp and y is an array containing sensor values. It looks like below:

"data": [
    {
      "name": "source",
      "values": [
        {"x": 1,"y": [28, 18]},
        {"x": 2,"y": [55, 45]},
        {"x": 3,"y": [43, 33]},
        {"x": 4,"y": [91, 81]},
        {"x": 5,"y": [81, 71]},
        {"x": 6,"y": [53, 43]},
        {"x": 7,"y": [19, 9]},
        {"x": 8,"y": [87, 77]},
        {"x": 9,"y": [52, 42]},
        {"x": 10,"y": [48, 38]},
        {"x": 11,"y": [24, 14]},
        {"x": 12,"y": [49, 39]},
        {"x": 13,"y": [87, 77]},
        {"x": 14,"y": [66, 56]},
        {"x": 15,"y": [17, 7]},
        {"x": 16,"y": [27, 17]},
        {"x": 17,"y": [68, 58]},
        {"x": 18,"y": [16, 6]},
        {"x": 19,"y": [49, 39]},
        {"x": 20,"y": [15, 5]}
      ],
      "format": {"type": "json"},
      "transform": []
    }
  ]

and I want to plot them like this: Sample output for multiline chart

"y" can be array of 3 elements as well. In that case 3 lines to be displayed.

What should the spec be to plot such a chart?

Answer 1

Below spec plots 3 lines for 3 different sources. instead of using an array of 'y', I'm using 3 different data source. Its a work around.It'll be good if I can remove redundant x values for each lines:

{
  "data": [
    {
      "format": {"type": "json"},
      "name": "source1",
      "transform": [],
      "values": [
        {"x": 1,"y": -0.3902548849582672},
        {"x": 2,"y": -0.6003460884094238},
        {"x": 3,"y": 0.11851298063993454},
        {"x": 4,"y": 0.181959331035614},
        {"x": 5,"y": 0.058059390634298325},
        {"x": 6,"y": 0.3555389642715454},
        {"x": 7,"y": 0.4836287498474121},
        {"x": 8,"y": 0.547075092792511},
        {"x": 9,"y": -0.14185644686222076},
        {"x": 10,"y": -0.5560533404350281}
      ]
    },
    {
      "format": {"type": "json"},
      "name": "source2",
      "transform": [],
      "values": [
        {"x": 1,"y": 9.677961349487305},
        {"x": 2,"y": 8.559270858764648},
        {"x": 3,"y": 6.373963356018066},
        {"x": 4,"y": 5.665279865264893},
        {"x": 5,"y": 5.106233596801758},
        {"x": 6,"y": 4.126406669616699},
        {"x": 7,"y": 3.599682331085205},
        {"x": 8,"y": 9.55825138092041},
        {"x": 9,"y": 9.739612579345703},
        {"x": 10,"y": 9.660603523254395}
      ]
    },
    {
      "format": {"type": "json"},
      "name": "source3",
      "transform": [],
      "values": [
        {"x": 1,"y": -0.44352585077285767},
        {"x": 2,"y": 2.11946702003479},
        {"x": 3,"y": 6.378153324127197},
        {"x": 4,"y": 6.696582317352295},
        {"x": 5,"y": 6.830059051513672},
        {"x": 6,"y": 7.590816497802734},
        {"x": 7,"y": 9.215282440185547},
        {"x": 8,"y": -0.4034229815006256},
        {"x": 9,"y": -1.8351556062698364},
        {"x": 10,"y": -1.7950527667999268}
      ]
    }
  ],
  "height": 200,
  "marks": [
    {
      "axes": [
        {
          "grid": true,
          "layer": "back",
          "scale": "x",
          "ticks": 5,
          "title": "x",
          "type": "x"
        },
        {
          "grid": true,
          "layer": "back",
          "scale": "y",
          "title": "y",
          "type": "y"
        }
      ],
      "description": "Line chart of Horsepower over time",
      "from": {"data": "layout"},
      "marks": [
        {
          "from": {
            "data": "source1",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#5b4fff"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        },
        {
          "from": {
            "data": "source2",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#16ea5d"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        },
        {
          "from": {
            "data": "source3",
            "transform": [{"by": "-x","type": "sort"}]
          },
          "properties": {
            "update": {
              "stroke": {"value": "#c93e06"},
              "strokeWidth": {"value": 1},
              "x": {"field": "x","scale": "x"},
              "y": {"field": "y","scale": "y"}
            }
          },
          "type": "line"
        }
      ],
      "name": "root",
      "properties": {
        "update": {"height": {"value": 200},"width": {"value": 200}}
      },
      "scales": [
        {
          "clamp": true,
          "domain": {"data": "source1","field": "x","sort": true},
          "name": "x",
          "nice": true,
          "rangeMax": 200,
          "rangeMin": 0,
          "round": true
        },
        {
          "clamp": true,
          "domain": {"data": "source1","field": "y"},
          "name": "y",
          "nice": true,
          "rangeMax": 0,
          "rangeMin": 200,
          "round": true
        }
      ],
      "type": "group"
    }
  ],
  "padding": "auto",
  "width": 200
}

Use below link to test the above spec on Vega Editor :

http://vega.github.io/vega-editor/