%%## degress of freedomestablishingthecssvariablesforourvisualizationsystem.table.html.append(style:=new("style",```css@property--width{syntax:"<number>";inherits:true;initial-value:600;}@property--uX{syntax:"<length>";inherits:true;initial-value:1px;}@property--X-dir{syntax:"<number>";inherits:true;initial-value:1;}@property--Y-dir{syntax:"<number>";inherits:true;initial-value:1;}@property--X-dir{syntax:"<number>";inherits:true;initial-value:1;}@property--height{syntax:"<number>";inherits:true;initial-value:400;}@property--uY{syntax:"<length>";inherits:true;initial-value:1px;}@property--depth{syntax:"<number>";inherits:true;initial-value:10;}@property--distance{syntax:"<number>";inherits:true;initial-value:36;}@property--uZ{syntax:"<length>";inherits:true;initial-value:1in;}@property--time{syntax:"<time>";inherits:true;initial-value:2s;}:root{--WIDTH:calc(var(--width)*var(--uX));--HEIGHT:calc(var(--height)*var(--uY));--DEPTH:calc(var(--depth)*var(--uZ));}```))
degress of freedom
establishing the css variables for our visualization system.
adding visibility toggles to the columns of table introduces a new, configurable marker style.
the table does NOT update the screen reader experience yet.
table.html.form.append(fieldset := new('fieldset', new("legend", "visibility")))
for i, name in enumerate(df.index.names, 1):
fieldset.append(
new("label", new("input", onchange="swapStyle(this)", type="checkbox", checked="", **aria(controls=F"{table.id}-col--{i}-style")), str(name))
)
fieldset.append(new("style", """
#%s tr th:nth-of-type(%i) {display: none;}
""" % (name, i), id =F"{table.id}-col--{i}-style", media="none"))
for j, row in enumerate(df.columns.values, 1):
fieldset.append(
new("label", new("input", onchange="swapStyle(this)", type="checkbox", checked="", **aria(controls=F"{table.id}-col-{j}-style")), str(row))
)
fieldset.append(new("style", """
#%s {
tbody tr td:nth-of-type(%i){display: none;}
thead tr th:nth-of-type(%i) {display: none;}
}
""" % (table.id, j, i + j), id =F"{table.id}-col-{j}-style", media="none"))
%%## general properties of the visual tablestyle.string+=\
```csstable#plot:is(.X, .Y, .Z) {width:var(--WIDTH);thead{display:none;}tbody{padding:50px;transform-style:preserve-3d;border:solid1px;position:relative;width:fit-content;display:flex;flex-direction:column;tr{display:flex;flex-direction:row;width:fit-content;transform-style:preserve-3d;transition:allcalc(var(--time)+1s)linear;border:solid2px;th,td{border:solid3px;}}}}```
the ordering of the axis definition matters because of the cascading nature of css.
in each definition of the X, Y, Z axes we establish new degrees of freedom for our
visualization such as width, height, and depth respectively.
%%## javascript support functions. ourgoalwiththesemethodsaretouseasmanysemanticfeaturesoftheelementtocontrolbehavior.thetagshoulddescribewhatitisANDwhatisdoes.table.html.append(new("script",```javascript/**swapthefeaturesonaspecificaxisbychangingcssvariables.*/functionswapVar(element){letoption=element.selectedOptions[0]target=document.getElementById(element.getAttribute(`aria-controls`));if(option.value<0){}else{target.style.setProperty(`--${element.name}-min`,`var(--${option.value}-min)`);target.style.setProperty(`--${element.name}-max`,`var(--${option.value}-max)`);target.querySelectorAll("tr").forEach((x)=>{x.style.setProperty(`--${element.name}`,`var(--${option.value})`);});}}/**togglesclassesonatargetbasedonasetofoptions*/functionswapClass(element){letoption=element.selectedOptions[0],target=document.getElementById(element.getAttribute(`aria-controls`));target.classList.toggle(element.name,option.value>-1);}/**switchthemediaattributeofacontrolledstyletag.*/functionswapStyle(element){lettarget=document.getElementById(element.getAttribute(`aria-controls`));target.setAttribute(`media`,element.checked?`none`:`all`);}```))
javascript support functions.
our goal with these methods are to use as many semantic features of the element
to control behavior. the tag should describe what it is AND what is does.
table.html.append(new("script",
/**swap the features on a specific axis by changing css variables.*/functionswapVar(element){
letoption=element.selectedOptions[0]
target=document.getElementById(element.getAttribute(`aria-controls`));
if(option.value<0){
}else{
target.style.setProperty(`--${element.name}-min`,`var(--${option.value}-min)`);
target.style.setProperty(`--${element.name}-max`,`var(--${option.value}-max)`);
target.querySelectorAll("tr").forEach(
(x)=>{
x.style.setProperty(`--${element.name}`,`var(--${option.value})`);
}
);
}
}
/**toggles classes on a target based on a set of options*/functionswapClass(element){
letoption=element.selectedOptions[0],
target=document.getElementById(element.getAttribute(`aria-controls`));
target.classList.toggle(element.name,option.value>-1);
}
/**switch the media attribute of a controlled style tag.*/functionswapStyle(element){
lettarget=document.getElementById(element.getAttribute(`aria-controls`));
target.setAttribute(`media`,element.checked?`none`:`all`);
}