%%

    shell.environment.globals.update(vars(__builtins__))

%%
## making sample data

create some randomized datasets with distinct clusters

    import sklearn.datasets, sklearn.discriminant_analysis, sklearn.model_selection
    features = 6
    df = pandas.DataFrame(*sklearn.datasets.make_blobs(200, features, centers=[
        (i**2,)*features for i in range(features)
    ]))

    df = pandas.concat(dict(zip("test train".split(), sklearn.model_selection.train_test_split(df))))
    df = df.rename_axis(index="selection blob".split())

apply statistical analysis to reduce the dimensionality of the data.
a sample of the full and reduced dataset are shown next, with the source as a caption.

<figure>
{{df.sample(2).style.to_html()}}
<figcaption>

    model = sklearn.discriminant_analysis.LinearDiscriminantAnalysis(n_components=3)
    model.fit(df.loc["test"], df.loc["test"].index)
    df = df.combine_first(
        pandas.DataFrame(model.transform(df.values), columns=list("xyz"), index=df.index)
    )
    df = pandas.concat([df, pandas.DataFrame([[-1]*features+ [0,0,0]] , pandas.MultiIndex.from_tuples([("test", -1)]), df.columns)])

</figcaption></figure>

%%
## generate a 3d plot in an image for comparsion

we'll compare our interactive css outcomes with rendered html image.

    import matplotlib.pyplot
    fig = matplotlib.pyplot.figure()
    ax = fig.add_subplot(projection="3d")
    df[list("xyz")].apply(lambda x: ax.scatter(*x.values, c=x.name[1]), axis=1);

%%
## creating our table
    
    table =\
{% set format="%.2f" %}
<table role=table id=pca>
    <tbody role=rowgroup style="--x-min: {{df.x.min()}}; --x-max: {{df.x.max()}}; --y-min: {{df.y.min()}}; --y-max: {{df.y.max()}}; 
    --z-min: {{df.z.min()}}; --z-max: {{df.z.max()}};">
    {%- for i, (_, row) in enumerate(df.iterrows()) -%}
        <tr role=row style="--x: {{row.loc['x']}}; --y: {{row.loc['y']}}; --z: {{row.loc['z']}};">
        <th role=rowheader>{{i}}</th>
        {%- for j in range(features) -%}
        <td role=cell>{{format % row.loc[j]}}</td>
        {%- endfor %}{% for j in "xyz" -%}
        <td role=cell hidden>{{ row.loc[j]}}</td>
        {%- endfor %}</tr>
    {%- endfor %}</tbody>
</table>




    form =\
<form name=controls>
    <script>
    function rotate(axis, el){
        document.getElementById("pca").style.setProperty(`--rotate-${axis}`, `${el.value}deg`);
    }
    </script>
    <label>x
    <input type=range min=0 max=360 value=350 step=5 oninput="rotate('x', this)" name="x"/>
    </label>
    <label>y
    <input type=range min=0 max=360 value=5 step=5 oninput="rotate('y', this)" name="y"/>
    </label>
    <label>z
    <input type=range min=0 max=360 value=15 step=5 oninput="rotate('z', this)" name="z"/>
    </label>
    <label>show table<input type=checkbox name=show checked onchange="document.getElementById('pca-style').setAttribute('media', this.checked ? 'screen': 'none')"/></label>
</form>

<details>
<summary>html table source</summary>
 
```html
{{table}}
```

 </details>
<details>
<summary>form source</summary>


```html
{{form}}
```

 </details>

%%
## styling the table

style the table using 3d css transform, rotations, and translations.

    style =\
<style id=pca-style media=screen>
.jp-RenderedHTMLCommon tbody tr:hover {
    background: unset;
}
#pca {
    --height: 600px;
    --width: 600px;
    --depth: 600px;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
    display: block;
    position: relative;
    width: var(--width);
    height: var(--height);
    margin-left: auto;
    margin-right: auto;
    tbody{
        perspective: .3;
        border: solid;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: var(--width);
        height: var(--height);
        --dx: calc(var(--x-max) - var(--x-min));
        --dy: calc(var(--y-max) - var(--y-min));
        --dz: calc(var(--z-max) - var(--z-min));
        --x-origin: calc(-1 * var(--x-min) / var(--dx) * var(--width));
        --y-origin: calc(var(--y-max) / var(--dy) * var(--height));
        transform-style: preserve-3d;
    }
    tr {        
        top: 0;
        left: 0;
        position: absolute;
        display: inline-block;
        transform-origin: var(--x-origin) var(--y-origin) 0;
        transform: 
            translateX(var(--x-origin)) translateY(var(--y-origin))
            rotateZ(calc(360deg - var(--rotate-z))) 
            rotateY(calc(360deg - var(--rotate-y)))  
            rotateX(calc(360deg - var(--rotate-x)))
            translateX(calc(var(--x) / var(--dx) * var(--width)))
            translateY(calc(-1 * var(--y) / var(--dy) * var(--height)))
            translateZ(calc(var(--z) / var(--dz) * var(--depth)))
            rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z));
        td {
            display: none;
        }
    }
    tr:hover, tr:focus-within {
         transform: 
            translateX(var(--x-origin)) translateY(var(--y-origin))
            rotateZ(calc(360deg - var(--rotate-z))) 
            rotateY(calc(360deg - var(--rotate-y)))  
            rotateX(calc(360deg - var(--rotate-x)))
            translateX(calc(var(--x) / var(--dx) * var(--width)))
            translateY(calc(-1 * var(--y) / var(--dy) * var(--height)))
            translateZ(calc(var(--z) / var(--dz) * var(--depth)))
            rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z))
            translateZ(10000px);
        th, td:not([hidden]) {
            display: unset;
        }
    }
    tr:last-of-type {
        background-color: red;
    }
}
</style>

    ...
<details open>
<summary>css with 3d translations, transformations, and rotations</summary>

```html
{{style}}
```

</details>


    ...;