Graphics / Spline

Use the graphics module to render splines.

import random
from h2o_wave import site, ui, graphics as g

x = [i * 20 for i in range(50)]
y = [
    88, 100, 116, 128, 126, 128, 118, 108, 121, 120, 99, 113, 117, 103, 98, 90, 104, 98, 82, 102, 104, 89, 87, 69,
    88, 97, 91, 105, 98, 86, 90, 107, 97, 107, 108, 128, 144, 148, 126, 106, 89, 99, 78, 70, 69, 64, 45, 29, 27, 38
]
y0 = [v - random.randint(5, min(y)) for v in y]

line_style = dict(fill='none', stroke='crimson', stroke_width=4)
area_style = dict(fill='crimson')

splines = [
    # Lines
    g.spline(x=x, y=y, **line_style),  # same as curve='linear'
    g.spline(x=x, y=y, curve='basis', **line_style),
    g.spline(x=x, y=y, curve='basis-closed', **line_style),
    g.spline(x=x, y=y, curve='basis-open', **line_style),
    g.spline(x=x, y=y, curve='cardinal', **line_style),
    g.spline(x=x, y=y, curve='cardinal-closed', **line_style),
    g.spline(x=x, y=y, curve='cardinal-open', **line_style),
    g.spline(x=x, y=y, curve='smooth', **line_style),
    g.spline(x=x, y=y, curve='smooth-closed', **line_style),
    g.spline(x=x, y=y, curve='smooth-open', **line_style),
    g.spline(x=x, y=y, curve='linear', **line_style),
    g.spline(x=x, y=y, curve='linear-closed', **line_style),
    g.spline(x=x, y=y, curve='monotone-x', **line_style),
    g.spline(x=x, y=y, curve='monotone-y', **line_style),
    g.spline(x=x, y=y, curve='natural', **line_style),
    g.spline(x=x, y=y, curve='step', **line_style),
    g.spline(x=x, y=y, curve='step-after', **line_style),
    g.spline(x=x, y=y, curve='step-before', **line_style),
    # Areas
    g.spline(x=x, y=y, y0=y0, **area_style),  # same as curve='linear'
    g.spline(x=x, y=y, y0=y0, curve='basis', **area_style),
    g.spline(x=x, y=y, y0=[], curve='basis', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='basis-open', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='cardinal', **area_style),
    g.spline(x=x, y=y, y0=[], curve='cardinal', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='cardinal-open', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='smooth', **area_style),
    g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),
    g.spline(x=x, y=y, y0=[], curve='linear', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='step', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),
    g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),
]

page = site['/demo']
row, col = 1, 1
for spline in splines:
    page[f'spline_{col}_{row}'] = ui.graphics_card(
        box=f'{col} {row} 3 1', view_box='0 0 1000 150', width='100%', height='100%',
        stage=g.stage(
            text=g.text(text=spline.curve or '', y=40, font_size=40),
            spline=spline,
        ),
    )
    col += 3
    if col > 11:
        row, col = row + 1, 1

page.save()

Tags:  graphics