direct transition from a table to a 3d plot¤
from nbconvert_a11y.repr import get_table, new
from nbconvert_a11y.table import aria
df = DataFrame(numpy.random.randn(30, 4), columns= list("xyza"))
%%
<style>
/**ff only demo gear**/
a[href="#www"] {
display: block;
height: 300px;
width: 400px;
background: -moz-element(#demo);
background-size: cover;
background-repeat: no-repeat;
font-size: 4rem;
}
</style>
what if this email never finds you well?
%%
css properties and 3d plot settings
PROPERTIES =\
```text/css
@property --w {
syntax: "<length>";
initial-value: 600px;
inherits: true;
}
@property --h {
syntax: "<length>";
initial-value: 400px;
inherits: true;
}
@property --d {
syntax: "<length>";
initial-value: 400px;
inherits: true;
}
@property --r {
syntax: "<transform-function>";
initial-value: scale(1);
inherits: true;
}
@property --rr {
syntax: "<transform-function>";
initial-value: scale(1);
inherits: true;
}
@property --t {
syntax: "<time>";
initial-value: 1.5s;
inherits: true;
}
```
DDD =\
```text/css
figure {
position: relative;
margin: 150px;
table {
width: var(--w);
height: var(--h);
}
table.ddd {
position: relative;
display: block;
transform-origin:
center center 0;
transform: var(--r);
transform-style: preserve-3d;
transition: all var(--t) linear;
tbody {
display: block;
transform-style: preserve-3d;
tr {
&[aria-selected="true"] {
border: solid 2px !important;
}
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
background: black !important;
color: white;
position: absolute;
transition: all var(--t) linear;
transform-style: preserve-3d;
--1-: calc((var(--1) - var(--1-min)) / var(--1-diff));
--2-: calc((var(--2) - var(--2-min)) / var(--2-diff));
--3-: calc((var(--3) - var(--3-min)) / var(--3-diff));
transform-origin: center center;
font-size: .5rem;
transform:
translate3d(
calc(var(--1-) * var(--w)),
calc((1 - var(--2-)) * var(--h)),
calc(var(--3-) * var(--d))
) translate3d(-50%, -50%, 0) var(--rr) ;
&:hover {
font-size: 1.1rem;
}
th {display: none;}
}
}
}
}
```
FLAT =\
```text/css
```
XY =\
```text/css
table.ddd {
}
```
YZ =\
```text/css
table.ddd {
--r: rotateY(270deg);
--rr: rotateY(-270deg);
}
```
XZ =\
```text/css
table.ddd {
--r: rotateX(270deg);
--rr: rotateX(-270deg);
}
```
the self contained event to fire when the `section.form.fieldset` is updated.
update_view =\
```text/javascript
if (this.checked) {
document.getElementById(`www`).classList.toggle(`ddd`, this.getAttribute(`aria-controls`) != `www`);
}
document.querySelectorAll(`[name=view][aria-controls]`).forEach((thing)=>{
var target = document.getElementById(thing.getAttribute(`aria-controls`));
if (target.tagName == `STYLE`) {
target.setAttribute("media", thing.checked ? "all" : "none");
}
});
```
build the table representation
section = df.pipe(get_table, id="www", caption="random ass 3d data")
section.style.string = "\n".join((PROPERTIES, DDD, section.style.string))
section.attrs.update(id="demo")
for row in section.table.select("tr"):
row.attrs.update(onclick="""
this.hasAttribute(`aria-selected`) ? this.removeAttribute(`aria-selected`) : this.setAttribute(`aria-selected`, `true`);
""".strip())
section.table.attrs.update({"class": "ddd"})
section.form.attrs.setdefault("style", "")
section.form.attrs["style"] += "display: block;"
section.form.extend((
new("fieldset", new(
"legend", "Prepared views",
new("ul",
new("li", new("label",
new("input", type="radio", name="view", **aria(controls="www"), onchange=update_view),
"default table view"
),
new("li",
new("input", type="radio", name="view", **aria(controls="xy"), checked="", onchange=update_view), "x-y scatter view"
),
new("li",
new("input", type="radio", name="view", **aria(controls="yz"), onchange=update_view), "y-z scatter view"
), new("li",
new("input", type="radio", name="view", **aria(controls="xz"), onchange=update_view), "x-z scatter view"
), role="group")
))
),
new("style", FLAT, id="flat", media="none"), new("style", XY, id="xy", media="all"),
new("style", YZ, id="yz", media="none"), new("style", XZ, id="xz", media="none"),
))
section
marginalia¤
a better user interface will have numeric inputs and selectors for units. using a json-ld-ish syntax we can map the time css syntax to css values and units module level 4
%%
schema=\
```toml
["@context"]
"css:values" = "https://drafts.csswg.org/css-values/"
[properties.time]
title = "title"
description = "the transition time"
"@type" = "css:values#time"
```