toggle between a table, histogram, and scatter plotยค
after a lot of experimentation we are on the path to formalization.
%%
import nbconvert_a11y.table
bs4.Tag._repr_html_ = bs4.Tag.prettify
section = DataFrame(numpy.random.randn(10, 3)).table()
start the table in scatter plot mode
section.html.table.attrs.update({"class": "x y scatter"})
create two radio buttons that will toggle the views by changing the classes on the table.s
scatter = nbconvert_a11y.table.new("input", "scatter", type="radio", checked="", name="state", onchange=(
onchange :=
```javascript
document.querySelectorAll(`[name=state]`).forEach((element) => {
if (element.dataset.class.length) {
document.getElementById(element.getAttribute(`aria-controls`)).classList.toggle(element.dataset.class, element.checked);
}
})
```
), **{"aria-controls": section.id, "data-class": "scatter"})
section.html.form.append(scatter)
hist = nbconvert_a11y.table.new("input", "histogram", type="radio", name="state",
onchange=onchange, **{"aria-controls": section.id, "data-class": "hist"})
section.html.form.append(hist)
hist = nbconvert_a11y.table.new("input", "table", type="radio", name="state",
onchange=onchange, **{"aria-controls": section.id, "data-class": ""})
section.html.form.append(hist)
section
%%
```css
@property --width {
syntax: "<length>";
inherits: true;
initial-value: 300px;
}
@property --height {
syntax: "<length>";
inherits: true;
initial-value: 300px;
}
table.x {
--_x-center: 0px;
--_x-value-min: var(--_x-column-min, var(--0-min));
--_x-value-max: var(--_x-column-max, var(--0-max));
--_x-value-diff: calc(var(--_x-value-max) - var(--_x-value-min));
tbody {
width: var(--width);
tr {
--_x-value: var(--_x-column, var(--0));
--_x-physical: calc(var(--width) * (var(--_x-value) - var(--_x-value-min)) / var(--_x-value-diff));
}
}
}
table.y {
--_y-center: 0px;
--_y-value-min: var(--_y-column-min, var(--1-min));
--_y-value-max: var(--_y-column-max, var(--1-max));
--_y-value-diff: calc(var(--_y-value-max) - var(--_y-value-min));
tbody {
height: var(--height);
tr {
--_y-value: var(--_y-column, var(--1));
--_y-physical: calc(var(--height) * (var(--_y-value) - var(--_y-value-min)) / var(--_y-value-diff));
}
}
}
table {
tbody {
transition: all 3s linear;
tr {
transition: all 3s linear;
}
}
}
table.scatter {
tbody {
display: block; position: relative;
tr {
display: block; position: absolute;
transform:
translateY(calc(var(--_y-physical, 0px) - var(--_y-center, 0px)))
translateX(calc(var(--_x-physical, 0px) - var(--_x-center, 0px)))
var(--r, rotateX(0deg))
translateY(var(--_y-center, 0px)) translateX(var(--_x-center, 0px))
translate(-50%, -50%)
;
}
}
}
table.hist {
tbody {
tr {
border: 2px solid;
display: block;
left: var(--_x-center, 0px);
width: calc(var(--_x-physical, 0px));
}
}
}
```