Vega-Lite: ¿Es posible graficar un gráfico de 3 capas con un solo eje Y utilizado solo por 2 capas específicas?
Estoy pensando cómo puedo trazar un solo gráfico con múltiples ejes Y de una manera más controlada. Mi gráfico actual ya tiene 3 capas, están en el mismo rango de valores, por lo que deben permanecer en un solo eje Y. Sin embargo, ahora tengo que trazar algo con una escala muy diferente en la parte superior, y necesito un eje Y independiente solo para algunas capas. ¿Es posible?
En este momento, si establezco resolve: scale: Y: independent, todas las capas parecen luchar por el segundo eje Y, y todo el gráfico se deshace.
A continuación se muestra un ejemplo mínimo reproducible que se puede copiar y pegar tal cual en https://vega.github.io/editor/#/ . El objetivo aquí es poder decir las inclinaciones de las 3 líneas con el ojo desnudo; en otras palabras, hacer que las líneas “X-Y” y “X2-Y2” utilicen el eje Y izquierdo con una escala, y hacer que “X3-Y3” utilice el eje Y derecho con una diferente.
Tenga en cuenta que en realidad, ya tengo 6 capas con diferentes tipos de marcas y seguiré agregando más. Todas esas, sin embargo, caerán en dos categorías de escala (digamos, valores de 1 a 10 y de 10000 a 20000). Me gustaría poder definir para cada capa en qué categoría cae y qué eje Y -izquierdo o derecho- utiliza.
{
"data": {
"values": [
{"x": 1, "y": 10},
{"x": 2, "y": 7},
{"x2": 1, "y2": 11},
{"x2": 2, "y2": 12},
{"x3": 1, "y3": 1000},
{"x3": 2, "y3": 2500}
]
},
"encoding": {"x": {"type": "quantitative"}, "y": {"type": "quantitative"}},
"layer": [
{
"mark": "line",
"encoding": {"x": {"field": "x"}, "y": {"field": "y"}}
},
{
"mark": {
"type": "square",
"size": 100
},
"encoding": {
"x": {"field": "x2"},
"y": {"field": "y2"},
"color": {"value": "red"}
}
},
{
"mark": "line",
"encoding": {
"x": {"field": "x3"},
"y": {"field": "y3"},
"color": {"value": "black"}
}
}
],
"mark": "line",
"config": {},
"resolve": {"scale": {"y": "independent"}}
}
davy.ai
Para trazar un solo gráfico con múltiples ejes Y de manera más controlada, puede utilizar el método de codificación “layer” en Vega-Lite. Dentro de cada capa, puede especificar la escala y posición del eje Y. En este caso específico, puede usar la codificación “resolve” para especificar que el eje Y para “X3-Y3” debe ser independiente. Aquí hay un ejemplo actualizado:
En este ejemplo, hemos eliminado las codificaciones “mark” y “config” y hemos definido el gráfico utilizando métodos de “layer”. Dentro de cada capa, hemos especificado el tipo de gráfico (línea o cuadrado), su posición (basado en los valores del campo “x” y “y”) y su color.
Para especificar las escalas del eje Y, hemos utilizado la codificación “resolve” dentro de la última capa (para el gráfico X3-Y3) y hemos establecido la “escala” en “independiente”. Esto asegura que el gráfico tendrá su propia escala independiente del eje Y.
Tenga en cuenta que si agrega más capas de gráfico, puede seguir especificando las escalas y posiciones del eje Y dentro de cada capa. Por ejemplo, si tuviera una cuarta capa con valores que van del 1 al 10, podría especificar que esta usaría el eje Y izquierdo con la misma escala que “X-Y” y “X2-Y2”.