Skip to content

table to xy plotยค

demo

%% 

    import nbconvert_a11y.table
    DataFrame(numpy.random.randn(20, 2), columns=list("xy")).table(id="xy", caption="randomly generated data that transforms into a 2d plot.").style(
```css
tr:hover {
    font-size: 2rem;
}
```
    ).checkbox({
        ("activate baseline plot styling", True):
```css
--h: 300px;
--w: 800px;
--X: 0;
--Y: 0;
transition: 5s all linear;
height: var(--h); width: var(--w);
thead, tfoot, caption{display: none;}
tbody {
    transition: 5s all linear;
    height: var(--h); width: var(--w);
    display: block; position: relative;
    --cx: 0px;
    --cy: 0px;
    border-left: solid blue;
    border-right: solid blue;
    border-top: solid red;
    border-bottom: solid red;
    tr {
        padding: .5em;
        background: unset;
        transition: 5s all linear;
        display: block; position: absolute;
        transform: 
            translateX(calc(var(--X) * (var(--0) - var(--0-min)) / var(--0-diff) * var(--w)))
            translateY(calc(var(--Y) * (var(--1) - var(--1-min)) / var(--1-diff) * var(--h)))
            translate(-50%, -50%)
            ;
        &::before, &::after {
            display: table-cell; position: absolute;
            counter-reset: index var(---0);
            content: counter(index);
            width: 100%;
            text-align: center;
            transition: 5s all linear;
            padding: .5em;
        }
        &::before {
            color: blue;
            transform:
                translateX(calc(var(--cx) - var(--X) * (var(--0) - var(--0-min)) / var(--0-diff) * var(--w)));

        }
        &::after {
            color: red;
            transform: 
                translateY(calc(var(--cy) - var(--Y) * (var(--1) - var(--1-min)) / var(--1-diff) * var(--h)))
                translateY(-100%)
                translateY(.5rem)
                ;
        }
    }
}
```
    , ("distribute markers in x", True):
```css
--X: 1;
```
    , ("distribute markers in y", True):
```css
--Y: 1;
```
    }).radiogroup({
    ("axis to the left", True) : 
```css
```

    , "center data": 
```css
tbody {
    --cx: calc(-1 * var(--0-min) / var(--0-diff) * var(--w));
    --cy: calc(-1 * var(--1-min) / var(--1-diff) * var(--h));
}
```
    , "axis to the right":
```css
tbody {
    --cx: var(--w);
    --cy: var(--h);
}
```

    }, name="origins")
pandas dataframe with 20 rows, 2 columns with 1 index levels and 1 columns levels.
None 'x' 'y'
0 -1.671 1.082
1 -0.585 -0.950
2 -0.625 -1.050
3 -1.795 1.402
4 0.245 -0.968
5 1.052 -0.165
6 -0.906 0.322
7 0.568 1.498
8 0.076 -1.020
9 0.624 -0.167
10 -1.082 1.423
11 0.687 1.536
12 -0.821 -1.307
13 0.620 0.101
14 0.212 1.414
15 1.153 -0.037
16 -0.219 0.583
17 0.884 0.030
18 0.576 -1.424
19 1.262 2.268
min -1.795 -1.424
max 1.262 2.268
diff 3.057 3.691
randomly generated data that transforms into a 2d plot. 
%%

```css
[href="#xy"] {
    background: -moz-element(#xy);
    background-size: contain;
    font-size: 10rem;
}
```