%%
```css
:root {
    --width: 1000px;
    --height: 400px;
}
table[role=table]{
    display: block;
    position: relative;
    width: var(--width);
    height: var(--height);
    tbody {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: var(--width);
        height: var(--height);
        tr {
            display: unset;
            position: absolute;
            left: calc((var(--x) - var(--x-min)) / (var(--x-max) - var(--x-min)) * var(--width));
            top: calc((var(--y) - var(--y-min)) / (var(--y-max) - var(--y-min)) * var(--height));
            width: 1rem;
            height: 1rem;
            border-radius: 1rem;
            border: solid;
        }
    }

}


.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
</style>
```

%%    
    table =\
{% set format="%.4f" %}
<table role=table style="--x-min: {{df.x.min()}}; --y-min: {{df.y.min()}}; --z-min: {{df.z.min()}}; --x-max: {{df.x.max()}}; --y-max: {{df.y.max()}}; --z-max: {{df.z.max()}};">
    <caption>a sin wave</caption>
    <thead role=rowgroup class=visually-hidden>
         <tr>
         <th>index</th><th>x</th><th>y</th><th>z</th>
         </tr>
    </thead>
    <tbody role=rowgroup>{% for i, row in df.iterrows() %}
    <tr role=row style="--index: {{loop.index}}; --x: {{row.x}}; --y: {{row.y}}; --z: {{row.z}}">
        <th>{{loop.index}}</th><td>{{format % row.x}}</td><td>{{format % row.y}}</td><td>{{format % row.z}}</td>
    </tr>
    {%- endfor %}</tbody>
</table>
                      
<figure>
<figcaption>creating the dataframe</figcaption>

    inc = locals().setdefault("inc", 2) + 1
    df = pandas.concat([
        (x := Series(numpy.linspace(0, inc*numpy.pi, 201))).rename("x"), 
        x.apply(numpy.sin).rename("y"), x.apply(numpy.cos).rename("z")
    ], axis=1)
                      
</figure>
                      

<figure>
<figcaption>source code html</figcaption>

```html
{{table}}
```

</figure>