Vertical concatenation

Two related views are stacked vertically while sharing the same input table.

Inputs and adaptation

Input: numeric x positions, loaded in Python by an internal gallery fixture. Each panel derives its own value in GenomeSpy: sin(x / 4) above and cos(x / 5) below.

Replace sincos_data() with your table. If it already contains measurements, remove the formula transforms and encode those fields on y. Update titles, units and domains. Keep & or gs.vconcat for stacked panels; explicitly choose shared/independent scales when adapting the intended navigation and value ranges.

Expected here: two vertically stacked point views from the same 31 input positions, with a red lower series. The formulas execute in the browser, not in Python.

Code

"""Vertical concatenation.

Two related views are stacked vertically while sharing the same input table.
"""

import genome_spy as gs
from genome_spy.datasets._grammar import sincos_data


# Load example positions for both charts.
data = sincos_data()

# Draw a sine wave in the upper chart.
sin_chart = (
    gs.Chart(data)
    .transform_formula(expr=gs.expr.sin(gs.datum.x / 4), as_="value")
    .mark_point(size=45)
    .encode(
        x=gs.X("x:Q").scale(zoom=True),
        y=gs.Y("value:Q").scale(zoom=True).title("sin"),
    )
    .with_view(stroke="lightgray")
)
# Draw a cosine wave in red for the lower chart.
cos_chart = (
    gs.Chart(data)
    .transform_formula(expr=gs.expr.cos(gs.datum.x / 5), as_="value")
    .mark_point(size=45, color="#c53b2c")
    .encode(
        x=gs.X("x:Q").scale(zoom=True).title("Position"),
        y=gs.Y("value:Q").scale(zoom=True).title("cos"),
    )
    .with_view(stroke="lightgray")
)

# Stack the two charts with a little space between them.
chart = gs.vconcat(sin_chart, cos_chart, spacing=20).properties(
    title="Vertical concatenation"
)

Show generated specification