Deneb - Vega Lite Small Multiples

[DW868990]

I have a Deneb question, is it possible using Vega-Lite to create a small multiple visual which will dynamical change the size of the multiples so it will all fit on one page and avoid the need of scrolling etc.

So wether there was say 5 products to show in the small multiples, or 15, each facet will dynamically change size depending on the number of products so it fits within the container of the page?

Thanks in advance.

[Ghhousuddin · Accepted solution]

Yes, it is possible to create a small multiple visual using Vega-Lite that dynamically adjusts the size of the multiples to fit on one page without the need for scrolling.

One way to achieve this is to use the `repeat` operator in Vega-Lite to create a grid of facets, where the number of rows and columns are determined dynamically based on the number of products being shown.

Here's an example Vega-Lite specification that demonstrates this:

```
{
"repeat": {"row": "product", "column": "year"},
"spec": {
"mark": "line",
"encoding": {
"x": {"field": "month", "type": "ordinal"},
"y": {"field": "sales", "type": "quantitative"}
}
},
"data": {
"values": [
{"product": "A", "year": 2020, "month": "Jan", "sales": 100},
{"product": "A", "year": 2020, "month": "Feb", "sales": 120},
{"product": "A", "year": 2020, "month": "Mar", "sales": 140},
{"product": "B", "year": 2020, "month": "Jan", "sales": 80},
{"product": "B", "year": 2020, "month": "Feb", "sales": 90},
{"product": "B", "year": 2020, "month": "Mar", "sales": 100},
{"product": "A", "year": 2021, "month": "Jan", "sales": 110},
{"product": "A", "year": 2021, "month": "Feb", "sales": 130},
{"product": "A", "year": 2021, "month": "Mar", "sales": 150},
{"product": "B", "year": 2021, "month": "Jan", "sales": 90},
{"product": "B", "year": 2021, "month": "Feb", "sales": 100},
{"product": "B", "year": 2021, "month": "Mar", "sales": 110}
]
},
"config": {
"view": {"stroke": "transparent"},
"axis": {"grid": false},
"scale": {"rangeStep": 20},
"facet": {"spacing": {"row": 10, "column": 10}}
}
}
```

In this example, the `repeat` operator is used to create a grid of facets based on the "product" and "year" fields. The `spec` property contains the visualization specification for each individual facet, which in this case is a line chart showing sales over time.

The `config` property is used to configure the layout and spacing of the facets. The `view` property sets the stroke to transparent to remove the border around each facet. The `axis` property sets the grid to false to remove the axis lines between the facets. The `scale` property sets the rangeStep to 20, which controls the size of the facets. The `facet` property sets the spacing between the facets in both the row and column directions.

With this approach, the size of the facets will dynamically adjust based on the number of products being shown, allowing all the facets to fit on one page without the need for scrolling.

[DW868990]

Thank you @Ghhousuddin .

I have used the above and there still seems to be a scroll bar: