Search code examples
jsonchartsvisualizationvega

Vega line plot from json data

If I have data in the form below as a json file:

{"groups":[{"days":[17,22,23,27,31],"experiment":"S1","value":[[19.77,23.92,22.19,20.47,25.85],[21.78,21.33,19.35,19.06,21.38],[18.86,24.47,19.40,20.50,24.13]]},{"days":[18,23,24,29,31],"experiment":"S2","value":[[12.77,24.92,27.19,21.47,29.85],[21.78,21.33,19.35,19.06,21.38],[18.86,24.47,19.40,20.50,24.13]]}, {"days":[27,32,33,37,41],"experiment":"S3","value":[[19.77,23.92,22.19,20.47,25.85],[21.78,21.33,19.35,19.06,21.38],[18.86,24.47,19.40,20.50,24.13]]}],"individuals":[]}

My goal is to plot days (x-axis) vs. value (y-axis) in vega. How to apply the appropriate transformation to achieve the data in a tabular format with (experiment, days, value) column?

I load the data as:

"data": [
{
  "name": "table",
  "url": "path_to_json", 
  "transform": [
  ## Need a transformation here to select groups and discard individuals 
  {
    "type": "flatten",
    "fields": ["value"],
    "as": ["value"]
  },
  {
    "type": "flatten",
    "fields": ["value", "days"],
    "as": ["value", "day"]
  }]
}

]

Solution

  • enter image description here

    Your data is in a weird shape but the following should give you some idea.

    {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic scatter plot example depicting automobile statistics.",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "source",
      "values": [
        {
          "groups": [
            {
              "days": [17, 22, 23, 27, 31],
              "experiment": "S1",
              "value": [
                [19.77, 23.92, 22.19, 20.47, 25.85],
                [21.78, 21.33, 19.35, 19.06, 21.38],
                [18.86, 24.47, 19.4, 20.5, 24.13]
              ]
            },
            {
              "days": [18, 23, 24, 29, 31],
              "experiment": "S2",
              "value": [
                [12.77, 24.92, 27.19, 21.47, 29.85],
                [21.78, 21.33, 19.35, 19.06, 21.38],
                [18.86, 24.47, 19.4, 20.5, 24.13]
              ]
            },
            {
              "days": [27, 32, 33, 37, 41],
              "experiment": "S3",
              "value": [
                [19.77, 23.92, 22.19, 20.47, 25.85],
                [21.78, 21.33, 19.35, 19.06, 21.38],
                [18.86, 24.47, 19.4, 20.5, 24.13]
              ]
            }
          ],
          "individuals": []
        }
      ],
      "transform": [
        {"type": "flatten", "fields": ["groups"]},
        {"type": "formula", "as": "days", "expr": "datum.groups.days"},
        {
          "type": "formula",
          "as": "experiment",
          "expr": "datum.groups.experiment"
        },
        {"type": "formula", "as": "value", "expr": "datum.groups.value"},
        {"type": "flatten", "fields": ["value"]},
        {"type": "flatten", "fields": ["days", "value"]}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "round": true,
      "nice": true,
      "zero": true,
      "domain": {"data": "source", "field": "days"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "round": true,
      "nice": true,
      "zero": true,
      "domain": {"data": "source", "field": "value"},
      "range": "height"
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "source", "field": "experiment"},
      "range": {"scheme": "category10"}
    }
  ],
  "axes": [
    {
      "scale": "x",
      "grid": true,
      "domain": false,
      "orient": "bottom",
      "tickCount": 5,
      "title": "days"
    },
    {
      "scale": "y",
      "grid": true,
      "domain": false,
      "orient": "left",
      "titlePadding": 5,
      "title": "value"
    }
  ],
  "legends": [
    {"fill": "color", "title": "Experiment", "symbolType": "circle"}
  ],
  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "from": {"data": "source"},
      "encode": {
        "update": {
          "x": {"scale": "x", "field": "days"},
          "y": {"scale": "y", "field": "value"},
          "shape": {"value": "circle"},
          "strokeWidth": {"value": 2},
          "opacity": {"value": 0.5},
    
          "fill": {"field": "experiment", "scale": "color"}
        }
      }
    }
  ]
}