Barley Trellis Plot Example
A trellis plot subdivides a chart into small multiples to isolate specific subsets and promote comparison. This example shows barley yields by variety at different sites, adapted from the original Trellis Display article by Becker et al.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A small multiples view of barley yields by site and variety.",
"width": 200,
"padding": 5,
"signals": [
{"name": "offset", "value": 15},
{"name": "cellHeight", "value": 100},
{"name": "height", "update": "6 * (offset + cellHeight)"}
],
"data": [
{
"name": "barley",
"url": "data/barley.json"
}
],
"scales": [
{
"name": "gscale",
"type": "band",
"range": [0, {"signal": "height"}],
"round": true,
"domain": {
"data": "barley",
"field": "site",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
},
{
"name": "xscale",
"type": "linear",
"nice": true,
"range": "width",
"round": true,
"domain": {"data": "barley", "field": "yield"}
},
{
"name": "cscale",
"type": "ordinal",
"range": "category",
"domain": {"data": "barley", "field": "year"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "zindex": 1}
],
"legends": [
{
"stroke": "cscale",
"title": "Year",
"padding": 4,
"encode": {
"symbols": {
"enter": {
"strokeWidth": {"value": 2},
"size": {"value": 50}
}
}
}
}
],
"marks": [
{
"name": "site",
"type": "group",
"from": {
"facet": {
"data": "barley",
"name": "sites",
"groupby": "site"
}
},
"encode": {
"enter": {
"y": {"scale": "gscale", "field": "site", "offset": {"signal": "offset"}},
"height": {"signal": "cellHeight"},
"width": {"signal": "width"},
"stroke": {"value": "#ccc"}
}
},
"scales": [
{
"name": "yscale",
"type": "point",
"range": [0, {"signal": "cellHeight"}],
"padding": 1,
"round": true,
"domain": {
"data": "barley",
"field": "variety",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"domain": false,
"grid": true,
"encode": {
"grid": {
"enter": {"strokeDash": {"value": [3,3]}}
}
}
},
{
"orient": "right",
"scale": "yscale",
"tickSize": 0,
"domain": false
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "sites"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "yield"},
"y": {"scale": "yscale", "field": "variety"},
"stroke": {"scale": "cscale", "field": "year"},
"strokeWidth": {"value": 2},
"size": {"value": 50}
}
}
}
]
},
{
"type": "text",
"from": {"data": "site"},
"encode": {
"enter": {
"x": {"field": "width", "mult": 0.5},
"y": {"field": "y"},
"fontSize": {"value": 11},
"fontWeight": {"value": "bold"},
"text": {"field": "datum.site"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
}