Best practices on composing a visualization from multiple charts

[Tobia Conforto]

Hello

I'm trying to create a visualization that is composed of multiple charts (a so-called "dashboard") but I'm probably using the wrong primitives or the wrong approach in composing them, because I'm running into issues.

You can see an example at [1] where I've only kept a single "box" out of a visualization that contains several such ones.

One problem, as you can see, is that I cannot enable axis grids, otherwise they extend well beyond their respective chart. This makes me think that I'm missing some sort of clipping container (a group?)

But I don't have a group with the exact size of the charting area: I only have a group for each "white box", with many (IMHO too many) signal expressions that are used to compute paddings and scale ranges to position the chart inside the box.

Is there a better approach? Should I create a group that is sized to the inner "charting area" and then plot the axes *outside* of it, so that I can use the group to clip the grids? Should I create nested groups for the white boxes and for the actual charts? More generally, how can I simplify the size computations between white boxes, charts and scales/axes?

Another related issue is the prevalence of "item.mark.group." expressions in my code. I found that expression by chance and now I'm using it every time I need to refer to the containing group attributes, mainly its size: item.mark.group.width and item.mark.group.height. Is this the wrong way to go about it? I tried using shorthands like width and height, but they always refer to the entire visualization. Should I define "width" and "height" signals inside each group, so that they override the outer ones?

Is there a "dashboard" example somewhere that I can study and learn from?

Tobia

[1] https://vega.github.io/editor/#/url/vega/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykSArJQBWENgDsQAGhAB3GgBN6aAIwAGACwaZ8GmSxoATGpMykDTGwg0AXnDQhxE+zKZIoAazIAnNg3EKDgDEAGaGIRohAOzSIFASIXpooNZk4kgANhBoANqg6Qj26ExsAB4ACkgKCjTiZLHEmQxFKgIAvlL5SIUOyLUAKnQZcAAScHoGMo0ZzWgCah1dPeiWmJkQYxOYDU0tGgudjt1FcTBI3pib+ttTu2j7B0snsOeYg5jDV5Mg07Oohu0ALpmUo0bKoUAZJBMOAZABiEkwAGVbHsZDZago4KVVB0QBBMABPYbJU6vd4kiEgRIZDLBNQqQwADgEAE5YiFESi7EY1DJOeJMAB1cbXOYmPGyGB0OAAITKpJpdPQUplsXi3nEcG8ACUqjQGOCBOjMdi0As2njUuksrlgSAFEg1rkng5Hc7bjM4OC8iAoTDlSAADJsbyIAAENDwDAQOy9aAAtABmKKs9qHf2whwAQQU4cwiBwofDUAYOEUTqdcb+GiTrLTiz90Kz6Gz4hoCHD4gYtKQXasmG8DECnr+zOZ6chzcDAFVMOH-aGY9WigCVOvG5nA7mo2CaFBavVR0Va0yWZvpw4AMISCBwKAFzAMbwrxNJ2tsi8BhwARQYYJLW84AARwYKtj3uDRWUeJtv1bDIaFAlAINQAA2JMmVaL8WxASpvBoJ1n1fVBkwWQE2ntaBMm9O0ZBwXxhHvTB2HEH17SQUoaNQHJ7WGMg4ACNiZGQbwPB9UAsWgfCcGYiQHAAUVKbocGGcNVQLcMSlKNS6BgEszguWIiRwE4fD8HBYmtdYXSOZYQBwKpiMhOAQm2VBWj5EASmwNhY1QJNjRAfCxX+TzLAs1B5kte0BPiLFSQEgsXypQlSSswM+nEClRlFLBwwAanzNg1iyL5tklRRlCpdKHHkJQ9IIcNDBAPFdBClI9BtBwXguMqWstGRmI+IpQALUo3JAK8RmzHV+nDWUAHkAA1w36ABJfog3k8MAHEFvkpFwxGeSdXk2I2BCEI7zchN5hkAliWeAy3iGewrSgajxNsk5SiokkZAUXykFqUl3RQdAwY5GhYUCdBfjemR2ygIpB2aGRvCQOoRvxTrMgcAAKHItMqapDwK8MHIUShhlcqQdPq8NGsMcME00soSZqOoWYpqpKGCrBAQASn6w4ChOQk-pcEBjJONwAliQHMtBys3RV-loYyWHYKzPEMaxtLccDQniaqTmyHJynKHCumesuXL51Zk3Sa51nLe8ywECFlq6NNw9zUoAF0b8eXUFRuBGzF7q2AyUMjMJEyHHoMMIBgaORwdIGQe4tR7T1-jcgdc4PDDdOCTgWEmHjcj2M4r7JYcX6Pv+6X9w8G9-DcqIZFDaHBQcd3fPOy7roNtI8fQfHHfZ32XZ5qmB4QYW8R8RQ0DDxt6-QCWm6lnvEocGmbhAC6rrgNyOrHo2p4qGfzdd3nD6XmQtyDDs6FHrr0Etw-ueMfr7REmJGykkoDSVkpIdA-R4BqWlBpLSml3BeF8P4dOMsHBhgfJZIklI5CwLlAqGQsU2DxSpIlbUpIcTVUNv3aezt6h4lKM1Khl8HAygQJQQB1BkE4EoHVeg3MnZm29iAVKzDP5eVoUIvEhImEX3EWwjhRcuHmUoG1PK18OZ+0tANCS3pQFRnAQ4KBcBwzSgJGwHw3QEHeGyINeOJwMFHxCL4PyEkVYQxVniDEAQzT-EIeIOK2MyzumxqIlIO8HDb2olDGGB9LytXtmlCJW966uExrDFQDCknRPQI3aJ6tYlwzuAw2R+JkkgDyc3eG5o8RKmyTg+IMcXwFM1g4ap2iKKdKAA