Compare quadratic graphs

This recipe uses the current generic data-plot API. The older projects/quadratic_graphs source remains a compatibility example for the quadratic-specific plot/trace methods and should not be copied into new work.

The question

How does each coefficient reshape a parabola?

This project compares named sampled series, emphasizes one curve, focuses the plot on the automatic root tape.

Capabilities demonstrated

• Mathematical notation
• Generic sampled plot comparison
• Semantic series state
• Camera focus

Build the foundation

from canvas import CanvasScene
from canvas.builder import CanvasBuilder

from .helpers import sample_quadratic


class QuadraticGraphs(CanvasScene):
    def __init__(self, **kwargs):
        builder = CanvasBuilder(title="Quadratic Graphs")

        builder.add_heading(
            "Graphs of quadratics",
            style={"align": "center", "margin-bottom": 0.45},
        )
        builder.add_math(
            r"ax^2 + bx + c = 0",
            style={"align": "center", "margin-bottom": 0.55},
        )

The heading and equation establish a stable visual context before any comparison begins.

Add sampled series through a project helper

The project keeps coefficient evaluation and sampling in helpers.py. The engine receives only named point data:

helpers.py

def sample_quadratic(a, b, c, *, x_min, x_max, steps=41):
    dx = (x_max - x_min) / (steps - 1)
    return [
        [x := x_min + index * dx, a * x * x + b * x + c]
        for index in range(steps)
    ]

plot_id = builder.add_data_plot(
    [
        {
            "id": "opens_up",
            "points": sample_quadratic(1, -2, 1, x_min=-1, x_max=3),
            "color": "#5eb3ff",
        },
        {
            "id": "opens_down",
            "points": sample_quadratic(-1, 2, 1, x_min=-1, x_max=3),
            "color": "#ff8a65",
        },
    ],
    id="quadratic_comparison",
    x_range=[-1, 3, 1],
    style={"width": 6.8, "margin-bottom": 0.5},
)

This division is important:

• The engine provides axes, curves, semantic parts, layout, state, and camera.
• The project helper expresses the subject-specific function and samples.

Emphasize and focus

builder.add_state_transition([
    {
        "target_id": f"{plot_id}::series:opens_up",
        "changes": {"stroke_width": 7},
    },
    {
        "target_id": f"{plot_id}::series:opens_down",
        "changes": {"stroke_opacity": 0.25},
    },
])

builder.add_camera_focus(
    plot_id,
    zoom=2.1,
    hold_time=1.2,
)

Semantic state distinguishes the current comparison without rebuilding either curve. Focus gives the viewer time to inspect the complete axes.

Finish the scene

        super().__init__(dsl=builder.build(), **kwargs)

Render from an engine checkout

./matemium.sh render quadratic_graphs

For a faster structural check:

./matemium.sh render quadratic_graphs -q preview

Try these changes

1. Change the coefficient pairs while preserving the shared axes.
2. Use the notes tape to summarize the invariant.
3. Reduce the focus zoom and compare the resulting framing.
4. Add a named marker at each vertex.

See Data visuals and transitions for the complete DataPlot schema.