Deneb: Multi-layer card

Hi Salle,

This may be jumping ahead of your learning journey, but possibly something for you to think about to avoid too much repetition.

If you're just adding measures and your dataset is effectively one row, you can use a fold transform (which is the same as an unpivot in Power Query) and specify your measure names, to get a simpler list of name/value pairs that you can encode just using two marks.

So, if my dataset looks like this...

I can add the following transform...

  "transform": [
    {
      "fold": [
        "Diameter Mean",
        "Diameter Median",
        "Diameter Max"
      ],
      "as": ["measure", "value"]
    }
  ],

...and the resulting dataset (now named as data_0 by Vega-Lite) will look like this:

You'll notice that this is now 3 rows, with additional measure and value columns. You'll get as many rows as entries you specify in the fold operation (as long as they are in your dataset).

The plan here is that I can encode the y channel to measure, which will position vertically by this field, and then I can add a text mark that encodes the text channel to the value column, and another that encodes text to the measure column.

Here's what this spec might look like as a whole:

{
  "data": {"name": "dataset"},
  "title": "Information",
  "background": "lightblue",
  "transform": [
    {
      "fold": [
        "Diameter Mean",
        "Diameter Median",
        "Diameter Max"
      ],
      "as": ["measure", "value"]
    }
  ],
  "encoding": {
    "y": {
      "field": "measure",
      "axis": null
    }
  },
  "layer": [
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "fontSize": 24
      },
      "encoding": {
        "text": {"field": "value"}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "top",
        "fontSize": 16
      },
      "encoding": {
        "text": {"field": "measure"}
      }
    }
  ]
}

And here's the output:

Hopefully this might help you reduce the amount of maintenance you could potentially have with this one. Good luck!

Daniel

EDIT: if you want the y-encoding to sort in the order you type the measures in the fold transform, just add "sort": null to enforce this order (ref). The y-encoding from above would now look as follows:

  "encoding": {
    "y": {
      "field": "measure",
      "axis": null,
      "sort": null
    }
  },