How to create scatter matrix in Vega-Lite where row/columns are identified by value (not column name)

user_206294 0
Viewed 140

Can I create a scatter matrix like https://vega.github.io/editor/#/examples/vega-lite/interactive_splom but where the column/rows are created from categorical values and not column names?

The following example tries to make a scatter matrix based on 3 values from a Gaussian bivariate distribution. But it only displays one row

{
   "mark": "point",
   "encoding": {
      "x": {
         "field": "value"
      },
      "y": {
         "field": "value"
      },
      "row": {
         "field": "coordinate"
      },
      "column": {
         "field": "coordinate"
      }
   },
   "data": {
      "values": [
         {
            "value": -0.5600273,
            "coordinate": 1
         },
         {
            "value": -0.31220084,
            "coordinate": 2
         },
         {
            "value": -0.37932342,
            "coordinate": 1
         },
         {
            "value": -0.799277,
            "coordinate": 2
         },
         {
            "value": -1.8596855,
            "coordinate": 1
         },
         {
            "value": -3.100046,
            "coordinate": 2
         }
      ]
   }
}

enter image description here.

vega-lite
1 Answers

It's not clear from your data what you expect to appear in the other two panels. Which data rows would be associated with each other when plotting coordinate 1 vs coordinate 2?

I'm going to assume you can modify your data such that it has a third field that specifies which points go together; if that's the case, you can use a pivot transform to turn your values into columns, and then use the repeat operator as in the example you linked to (vega editor):

{
  "data": {
    "values": [
      {"value": -0.5600273, "coordinate": 1, "point": 1},
      {"value": -0.31220084, "coordinate": 2, "point": 1},
      {"value": -0.37932342, "coordinate": 1, "point": 2},
      {"value": -0.799277, "coordinate": 2, "point": 2},
      {"value": -1.8596855, "coordinate": 1, "point": 3},
      {"value": -3.100046, "coordinate": 2, "point":3}
    ]
  },
  "transform": [
    {"pivot": "coordinate", "value": "value", "groupby": ["point"]}
  ],
  "repeat": {"row": ["1", "2"], "column": ["1", "2"]},
  "spec": {
    "mark": "point",
    "encoding": {
      "x": {"field": {"repeat": "column"}, "type": "quantitative"},
      "y": {"field": {"repeat": "row"}, "type": "quantitative"}
    }
  }
}

enter image description here

If you can't add that to your dataset and you just want adjacent values to be treated as part of the same point, you can specify this using a series of transforms to construct the "point" field and recover the same chart (vega editor):

{
  "data": {
    "values": [
      {"value": -0.5600273, "coordinate": 1},
      {"value": -0.31220084, "coordinate": 2},
      {"value": -0.37932342, "coordinate": 1},
      {"value": -0.799277, "coordinate": 2},
      {"value": -1.8596855, "coordinate": 1},
      {"value": -3.100046, "coordinate": 2}
    ]
  },
  "transform": [
    {"window": [{"op": "row_number", "as": "point"}]},
    {"calculate": "ceil(datum.point / 2)", "as": "point"},
    {"pivot": "coordinate", "value": "value", "groupby": ["point"]}
  ],
  "repeat": {"row": ["1", "2"], "column": ["1", "2"]},
  "spec": {
    "mark": "point",
    "encoding": {
      "x": {"field": {"repeat": "column"}, "type": "quantitative"},
      "y": {"field": {"repeat": "row"}, "type": "quantitative"}
    }
  }
}

enter image description here

user_29378310
Related