making figure axes from grouped table headers¤

the visual axes of a 1d, 2d, or 3d figure use combinations of gestalt principles to visual observe many observations. to make visualization from tables we should consider the role the axes play in exploration.

this notebook creates 3d axes from th indexes created when projecting the data onto a grid.

it also demonstrates the first time i fucked with -moz-element which gives this sick background effect.

    df = DataFrame(numpy.random.randn(100,3)*3, columns=list("xyz"))

    import nbconvert_a11y.t
    from nbconvert_a11y.t import Config

    (g := df.groupby([
        df[i].round().rename(i + "0") for i in "xyz"
    ]).apply(identity).rename_axis(index={-1: "pos"})).pipe(
        nbconvert_a11y.t.get_table, id="plot", config=nbconvert_a11y.t.Config(
            data_visibility=Config.DataVisibility(max_rows=10000)
        )
    )

x0	y0	z0	index 4	x	y	z
-7.0	-1.0	2.0	3	-6.89	-1.04	2.12
-6.0	-0.0	-0.0	81	-5.78	-0.36	0.05
-6.0	2.0	2.0	32	-6.08	1.58	2.32
-5.0	-4.0	-3.0	7	-4.98	-3.84	-3.28
-5.0	-2.0	-2.0	10	-5.07	-1.71	-2.28
-5.0	-0.0	-2.0	5	-5.36	0.21	-2.39
-5.0	2.0	1.0	73	-4.91	1.83	1.46
-4.0	-4.0	1.0	72	-3.82	-3.84	1.29
-4.0	-1.0	-2.0	75	-3.58	-1.22	-2.15
-4.0	2.0	-2.0	80	-3.87	2.38	-1.67
-4.0	2.0	2.0	55	-4.12	1.74	1.71
-4.0	5.0	4.0	79	-3.52	5.00	3.79
-3.0	-4.0	-3.0	98	-2.92	-4.14	-3.45
-3.0	-2.0	-0.0	46	-2.61	-1.66	0.24
-3.0	-1.0	3.0	4	-2.96	-0.79	2.57
-3.0	-0.0	-2.0	62	-3.48	0.23	-1.86
-3.0	-0.0	-1.0	22	-2.75	0.10	-0.98
-3.0	-0.0	1.0	54	-2.65	-0.42	1.22
-3.0	1.0	-5.0	91	-3.45	1.06	-5.08
-3.0	1.0	3.0	94	-2.65	0.96	3.10
-3.0	2.0	4.0	86	-2.65	1.93	3.96
-3.0	5.0	-0.0	90	-3.27	4.74	0.39
-2.0	-4.0	-2.0	60	-1.79	-3.99	-2.38
-2.0	-2.0	-4.0	52	-2.18	-2.15	-3.54
-2.0	-0.0	-1.0	6	-1.98	-0.35	-1.42
-2.0	-0.0	-1.0	68	-1.87	-0.45	-0.70
-2.0	-0.0	3.0	19	-1.70	-0.35	3.13
-2.0	3.0	-0.0	43	-1.63	2.80	-0.08
-2.0	5.0	1.0	2	-1.80	4.54	1.50
-1.0	-3.0	2.0	42	-1.17	-3.49	2.30
-1.0	-2.0	5.0	61	-0.83	-2.20	4.58
-1.0	-1.0	-2.0	26	-1.32	-1.39	-2.48
-1.0	-0.0	-2.0	37	-1.36	0.44	-2.10
-1.0	-0.0	1.0	48	-0.56	-0.26	0.87
-1.0	-0.0	5.0	63	-1.16	0.04	4.66
-1.0	1.0	4.0	31	-1.47	1.41	3.74
-1.0	4.0	1.0	33	-1.39	3.82	1.45
-0.0	-7.0	-3.0	11	-0.37	-6.65	-2.68
-0.0	-6.0	-2.0	17	-0.09	-6.04	-2.34
-0.0	-5.0	6.0	24	0.47	-5.23	5.86
-0.0	-2.0	-2.0	53	-0.29	-2.20	-2.42
-0.0	-1.0	-7.0	96	-0.43	-0.65	-6.66
-0.0	-1.0	-1.0	38	-0.21	-0.69	-1.06
-0.0	-1.0	-1.0	95	-0.03	-0.64	-1.50
-0.0	-0.0	2.0	1	-0.20	-0.19	1.73
-0.0	2.0	-1.0	84	0.42	2.06	-1.47
-0.0	2.0	1.0	88	0.48	1.90	0.88
-0.0	4.0	-3.0	18	0.14	4.12	-2.83
-0.0	4.0	2.0	35	0.14	3.98	2.19
-0.0	5.0	-1.0	82	0.42	5.24	-0.71
-0.0	5.0	3.0	58	0.19	5.38	2.51
-0.0	6.0	-0.0	87	0.02	6.09	-0.33
-0.0	6.0	3.0	41	-0.39	5.92	3.43
1.0	-1.0	-5.0	39	1.06	-0.92	-5.10
1.0	2.0	2.0	34	1.47	1.87	2.32
1.0	2.0	5.0	65	0.98	2.21	4.74
1.0	4.0	-4.0	44	1.19	4.16	-4.48
1.0	4.0	-0.0	0	1.06	3.71	-0.30
1.0	7.0	-2.0	27	0.88	6.92	-1.71
2.0	-4.0	5.0	50	1.64	-3.58	4.65
2.0	-3.0	-8.0	21	2.23	-3.10	-7.98
2.0	-1.0	-4.0	66	1.61	-0.90	-4.42
2.0	-1.0	-1.0	83	2.05	-1.09	-1.04
2.0	-0.0	-0.0	28	1.99	-0.41	0.34
2.0	-0.0	-0.0	77	1.83	0.43	-0.11
2.0	-0.0	5.0	12	1.52	0.28	4.60
2.0	-0.0	5.0	51	2.13	0.29	4.62
2.0	1.0	-3.0	59	2.20	1.39	-3.27
2.0	1.0	-1.0	23	1.72	0.62	-0.80
2.0	3.0	2.0	71	1.77	3.29	2.17
3.0	-4.0	-1.0	69	2.76	-4.07	-1.22
3.0	-4.0	3.0	76	2.88	-3.72	2.83
3.0	-3.0	-5.0	45	2.76	-2.90	-5.22
3.0	-3.0	-1.0	16	2.73	-3.06	-0.79
3.0	-2.0	-3.0	64	3.39	-2.01	-3.30
3.0	-2.0	-1.0	57	2.84	-1.64	-1.47
3.0	-2.0	2.0	78	3.22	-2.04	1.91
3.0	-2.0	4.0	74	3.26	-2.12	4.40
3.0	-1.0	-1.0	20	3.18	-0.56	-1.09
3.0	-1.0	-0.0	29	3.29	-1.09	-0.28
3.0	-1.0	4.0	97	2.77	-0.66	3.79
3.0	-0.0	-1.0	25	3.27	-0.09	-0.69
3.0	1.0	-5.0	9	2.98	1.01	-4.51
3.0	1.0	-4.0	99	3.10	1.05	-4.48
3.0	1.0	3.0	56	3.13	1.34	3.17
3.0	3.0	2.0	49	2.55	3.41	1.88
4.0	-6.0	-1.0	36	3.83	-5.55	-0.60
4.0	-3.0	-0.0	93	4.12	-3.07	0.29
4.0	-1.0	-2.0	89	4.26	-0.90	-2.44
4.0	-1.0	1.0	40	3.74	-1.23	0.53
4.0	-1.0	3.0	13	3.74	-0.98	3.27
4.0	1.0	-4.0	14	4.49	0.78	-4.39
4.0	2.0	3.0	67	4.15	1.81	2.78
4.0	4.0	-4.0	15	3.61	4.35	-3.70
4.0	5.0	4.0	47	4.30	5.12	3.89
6.0	-0.0	1.0	70	6.40	0.20	1.10
6.0	1.0	-2.0	85	6.44	0.71	-2.11
6.0	8.0	-2.0	92	6.38	7.64	-2.45
7.0	4.0	-3.0	30	6.78	4.12	-2.57
8.0	1.0	-1.0	8	7.51	0.86	-0.99
x0	y0	z0	index 4	x	y	z
min				-7.00	-7.00	-8.00
max				8.00	8.00	6.00

%%

```css
.jp-RenderedMarkdown, .markdown .nb-outputs {
    background: -moz-element(#plot);
    background-filter: sepia(100%);
    background-size: contain;
}
#plot {
    --w: 600px; --h: 400px;
    width: var(--w); height: var(--h);
    position: relative;
    display: block;
    --dx: calc(var(--x-max) - var(--x-min));
    --dy: calc(var(--y-max) - var(--y-min));
    --dx0: calc(var(--x0-max) - var(--x0-min));
    --dy0: calc(var(--y0-max) - var(--y0-min));
    --dz0: calc(var(--z0-max) - var(--z0-min));
    --r: -10deg;
    top: 50px; left: 50px;    
    perspective: 10em;
    transform-style: preserve-3d;
    thead, tfoot, td, tbody[aria-hidden] {display: none;}
    tbody {
        tr {
            --x0-rel: calc((var(--x0) - var(--x0-min)) / var(--dx0));
            --y0-rel: calc((var(--y0) - var(--y0-min)) / var(--dy0));
            th {
                display: inline-block;
                position: absolute;
                top: 0; left: 0;
                --t: rotateX(var(--r)) rotateY(var(--r)) rotateZ(var(--r));
                --yy: calc(var(--y0-max) / var(--dy0) * var(--h));
                --xx: calc(var(--x0-max) / var(--dx0) * var(--w));
                transform-origin: top left;
                &amp;:nth-child(1) {
                    transform: var(--t) translateX(calc(var(--x0-rel) * var(--w))) translateY(var(--yy));
                }
                &amp;:nth-child(2) {
                    transform: var(--t) translateY(calc(var(--y0-rel) * var(--h))) translateX(var(--xx));
                }
                &amp;:nth-child(3) {
                    transform: var(--t) translateX(var(--xx)) translateY(var(--yy)) translateZ(calc(var(--z0) * 10em));
                }
                &amp;:nth-child(4) {
                    transform: var(--t) 
                        translateX(calc((var(--x) - var(--x-min)) / var(--dx) * var(--w)))
                        translateY(calc((var(--y) - var(--y-min)) / var(--dy) * var(--h)))
                        translateZ(calc(var(--z) * 10em));
                    font-size: 50%;
                }
            }     
        }
    }
}
```