manywidgets demo - manywidgets

A live, statically-exportable tour. Row/Column/Grid arrange widgets so a control sits beside what it drives — links are easy to follow. Everything works in a live kernel and in the static export with no kernel.

import numpy as np
from ipywidgets import jsdlink
from manywidgets import (
    Chart, Slider, RangeSlider, Dropdown, Toggle, Button,
    NumberInput, Stat, NumberDisplay, Text, Binder,
    Row, Column, Grid,
)

An interactive chart¶

The control panel (a Column) sits to the left of the Chart in a Row. The controls drive the chart’s type, legend, height, and (via Binder) width.

x = np.linspace(0, 10, 100)
chart = Chart(title="manywidgets demo", x_label="x", y_label="y", height=320, width=520)
chart.add_series(x=x, y=np.sin(x), name="sin")
chart.add_series(x=x, y=np.cos(x), name="cos")

kind = Dropdown(label="Chart type", options=["line", "bar", "scatter"], value="line")
legend = Toggle(label="Show legend", value=True)
height = Slider(label="Height", min=160, max=480, step=20, value=320)
width = Slider(label="Width (×40 + 200)", min=4, max=12, step=1, value=8)
width_binder = Binder(source=width, source_field="value", target=chart,
                      target_field="width", multiplier=40, offset=200)

jsdlink((kind, "value"), (chart, "chart_type"))
jsdlink((legend, "value"), (chart, "legend_enabled"))
jsdlink((height, "value"), (chart, "height"))

Row(
    Column(kind, legend, height, width, width_binder, gap="10px"),
    chart,
    gap="24px", align="start",
)

A counter, in a row¶

One Button.clicks drives a Stat and an animated NumberDisplay, side by side.

btn = Button(label="+1")
stat = Stat(label="Clicks", value=0)
count = NumberDisplay(label="Clicks (animated)", format="{}", duration=300)
jsdlink((btn, "clicks"), (stat, "value"))
jsdlink((btn, "clicks"), (count, "value"))
Row(btn, stat, count, gap="24px", align="center")

A metric grid¶

A Grid of Stat cards — a static dashboard.

Grid(
    Stat(label="Revenue", value=1234, unit="USD", delta=12),
    Stat(label="Users", value=987, delta=-3),
    Stat(label="Latency", value=42, unit="ms"),
    Stat(label="Uptime", value=99, unit="%", delta=1),
    columns=2, gap="12px",
)

More controls¶

A RangeSlider feeds a NumberDisplay; a Dropdown echoes into a Text readout — each pair on its own row.

rng = RangeSlider(label="Range", min=0, max=100, low=20, high=80)
high = NumberDisplay(label="Upper handle", format="{:,.0f}", duration=300)
jsdlink((rng, "high"), (high, "value"))

num = NumberInput(label="A number", min=0, max=100, value=42)
pick = Dropdown(label="Pick one", options=["alpha", "beta", "gamma"], value="alpha")
echo = Text()
jsdlink((pick, "value"), (echo, "value"))

Column(
    Row(rng, high, gap="16px", align="center"),
    Row(pick, echo, gap="16px", align="center"),
    num,
    gap="14px",
)