today we made our own html table using data created with a pandas dataframe. then we used css to create image like representations of the tables; we hint at a potential future where more data is included in the data document rather than lost in other media.
this work builds off of histograms suck and considering accessible visualization using HTML standards.
%%
``` css
: root {
-- width : 1000 px ;
-- height : 400 px ;
}
table [ role = table ]{
display : block ;
position : relative ;
width : var ( -- width );
height : var ( -- height );
tbody {
display : block ;
position : absolute ;
top : 0 ;
left : 0 ;
width : var ( -- width );
height : var ( -- height );
tr {
display : unset ;
position : absolute ;
left : calc (( var ( -- x ) - var ( -- x - min )) / ( var ( -- x - max ) - var ( -- x - min )) * var ( -- width ));
top : calc (( var ( -- y ) - var ( -- y - min )) / ( var ( -- y - max ) - var ( -- y - min )) * var ( -- height ));
width : 1 rem ;
height : 1 rem ;
border - radius : 1 rem ;
border : solid ;
}
}
}
. visually - hidden {
clip : rect ( 0 0 0 0 );
clip - path : inset ( 50 % );
height : 1 px ;
overflow : hidden ;
position : absolute ;
white - space : nowrap ;
width : 1 px ;
}
```
:root {
--width: 1000px;
--height: 400px;
}
table[role=table]{
display: block;
position: relative;
width: var(--width);
height: var(--height);
tbody {
display: block;
position: absolute;
top: 0;
left: 0;
width: var(--width);
height: var(--height);
tr {
display: unset;
position: absolute;
left: calc((var(--x) - var(--x-min)) / (var(--x-max) - var(--x-min)) * var(--width));
top: calc((var(--y) - var(--y-min)) / (var(--y-max) - var(--y-min)) * var(--height));
width: 1rem;
height: 1rem;
border-radius: 1rem;
border: solid;
}
}
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
%%
table = \
{ % set format = " %.4f " % }
< table role = "table" style = "--x-min: {{df.x.min()}}; --y-min: {{df.y.min()}}; --z-min: {{df.z.min()}}; --x-max: {{df.x.max()}}; --y-max: {{df.y.max()}}; --z-max: {{df.z.max()}};" >
< caption > a sin wave </ caption >
< thead class = "visually-hidden" role = "rowgroup" >
< tr >
< th > index </ th >< th > x </ th >< th > y </ th >< th > z </ th >
</ tr >
</ thead >
< tbody role = "rowgroup" > { % for i , row in df . iterrows () % }
< tr role = "row" style = "--index: {{loop.index}}; --x: {{row.x}}; --y: {{row.y}}; --z: {{row.z}}" >
< th > {{ loop . index }} </ th >< td > {{ format % row . x }} </ td >< td > {{ format % row . y }} </ td >< td > {{ format % row . z }} </ td >
</ tr >
{ %- endfor % } </ tbody >
</ table >
< figure >
< figcaption > creating the dataframe </ figcaption >
inc = locals () . setdefault ( "inc" , 2 ) + 1
df = pandas . concat ([
( x := Series ( numpy . linspace ( 0 , inc * numpy . pi , 201 ))) . rename ( "x" ),
x . apply ( numpy . sin ) . rename ( "y" ), x . apply ( numpy . cos ) . rename ( "z" )
], axis = 1 )
</ figure >
< figure >
< figcaption > source code html </ figcaption >
``` html
{{ table }}
```
</ figure >
table =\
a sin wave
index x y z
1 0.0000 0.0000 1.0000
2 0.0471 0.0471 0.9989
3 0.0942 0.0941 0.9956
4 0.1414 0.1409 0.9900
5 0.1885 0.1874 0.9823
6 0.2356 0.2334 0.9724
7 0.2827 0.2790 0.9603
8 0.3299 0.3239 0.9461
9 0.3770 0.3681 0.9298
10 0.4241 0.4115 0.9114
11 0.4712 0.4540 0.8910
12 0.5184 0.4955 0.8686
13 0.5655 0.5358 0.8443
14 0.6126 0.5750 0.8181
15 0.6597 0.6129 0.7902
16 0.7069 0.6494 0.7604
17 0.7540 0.6845 0.7290
18 0.8011 0.7181 0.6959
19 0.8482 0.7501 0.6613
20 0.8954 0.7804 0.6252
21 0.9425 0.8090 0.5878
22 0.9896 0.8358 0.5490
23 1.0367 0.8607 0.5090
24 1.0838 0.8838 0.4679
25 1.1310 0.9048 0.4258
26 1.1781 0.9239 0.3827
27 1.2252 0.9409 0.3387
28 1.2723 0.9558 0.2940
29 1.3195 0.9686 0.2487
30 1.3666 0.9792 0.2028
31 1.4137 0.9877 0.1564
32 1.4608 0.9940 0.1097
33 1.5080 0.9980 0.0628
34 1.5551 0.9999 0.0157
35 1.6022 0.9995 -0.0314
36 1.6493 0.9969 -0.0785
37 1.6965 0.9921 -0.1253
38 1.7436 0.9851 -0.1719
39 1.7907 0.9759 -0.2181
40 1.8378 0.9646 -0.2639
41 1.8850 0.9511 -0.3090
42 1.9321 0.9354 -0.3535
43 1.9792 0.9178 -0.3971
44 2.0263 0.8980 -0.4399
45 2.0735 0.8763 -0.4818
46 2.1206 0.8526 -0.5225
47 2.1677 0.8271 -0.5621
48 2.2148 0.7997 -0.6004
49 2.2619 0.7705 -0.6374
50 2.3091 0.7396 -0.6730
51 2.3562 0.7071 -0.7071
52 2.4033 0.6730 -0.7396
53 2.4504 0.6374 -0.7705
54 2.4976 0.6004 -0.7997
55 2.5447 0.5621 -0.8271
56 2.5918 0.5225 -0.8526
57 2.6389 0.4818 -0.8763
58 2.6861 0.4399 -0.8980
59 2.7332 0.3971 -0.9178
60 2.7803 0.3535 -0.9354
61 2.8274 0.3090 -0.9511
62 2.8746 0.2639 -0.9646
63 2.9217 0.2181 -0.9759
64 2.9688 0.1719 -0.9851
65 3.0159 0.1253 -0.9921
66 3.0631 0.0785 -0.9969
67 3.1102 0.0314 -0.9995
68 3.1573 -0.0157 -0.9999
69 3.2044 -0.0628 -0.9980
70 3.2515 -0.1097 -0.9940
71 3.2987 -0.1564 -0.9877
72 3.3458 -0.2028 -0.9792
73 3.3929 -0.2487 -0.9686
74 3.4400 -0.2940 -0.9558
75 3.4872 -0.3387 -0.9409
76 3.5343 -0.3827 -0.9239
77 3.5814 -0.4258 -0.9048
78 3.6285 -0.4679 -0.8838
79 3.6757 -0.5090 -0.8607
80 3.7228 -0.5490 -0.8358
81 3.7699 -0.5878 -0.8090
82 3.8170 -0.6252 -0.7804
83 3.8642 -0.6613 -0.7501
84 3.9113 -0.6959 -0.7181
85 3.9584 -0.7290 -0.6845
86 4.0055 -0.7604 -0.6494
87 4.0527 -0.7902 -0.6129
88 4.0998 -0.8181 -0.5750
89 4.1469 -0.8443 -0.5358
90 4.1940 -0.8686 -0.4955
91 4.2412 -0.8910 -0.4540
92 4.2883 -0.9114 -0.4115
93 4.3354 -0.9298 -0.3681
94 4.3825 -0.9461 -0.3239
95 4.4296 -0.9603 -0.2790
96 4.4768 -0.9724 -0.2334
97 4.5239 -0.9823 -0.1874
98 4.5710 -0.9900 -0.1409
99 4.6181 -0.9956 -0.0941
100 4.6653 -0.9989 -0.0471
101 4.7124 -1.0000 -0.0000
102 4.7595 -0.9989 0.0471
103 4.8066 -0.9956 0.0941
104 4.8538 -0.9900 0.1409
105 4.9009 -0.9823 0.1874
106 4.9480 -0.9724 0.2334
107 4.9951 -0.9603 0.2790
108 5.0423 -0.9461 0.3239
109 5.0894 -0.9298 0.3681
110 5.1365 -0.9114 0.4115
111 5.1836 -0.8910 0.4540
112 5.2308 -0.8686 0.4955
113 5.2779 -0.8443 0.5358
114 5.3250 -0.8181 0.5750
115 5.3721 -0.7902 0.6129
116 5.4192 -0.7604 0.6494
117 5.4664 -0.7290 0.6845
118 5.5135 -0.6959 0.7181
119 5.5606 -0.6613 0.7501
120 5.6077 -0.6252 0.7804
121 5.6549 -0.5878 0.8090
122 5.7020 -0.5490 0.8358
123 5.7491 -0.5090 0.8607
124 5.7962 -0.4679 0.8838
125 5.8434 -0.4258 0.9048
126 5.8905 -0.3827 0.9239
127 5.9376 -0.3387 0.9409
128 5.9847 -0.2940 0.9558
129 6.0319 -0.2487 0.9686
130 6.0790 -0.2028 0.9792
131 6.1261 -0.1564 0.9877
132 6.1732 -0.1097 0.9940
133 6.2204 -0.0628 0.9980
134 6.2675 -0.0157 0.9999
135 6.3146 0.0314 0.9995
136 6.3617 0.0785 0.9969
137 6.4088 0.1253 0.9921
138 6.4560 0.1719 0.9851
139 6.5031 0.2181 0.9759
140 6.5502 0.2639 0.9646
141 6.5973 0.3090 0.9511
142 6.6445 0.3535 0.9354
143 6.6916 0.3971 0.9178
144 6.7387 0.4399 0.8980
145 6.7858 0.4818 0.8763
146 6.8330 0.5225 0.8526
147 6.8801 0.5621 0.8271
148 6.9272 0.6004 0.7997
149 6.9743 0.6374 0.7705
150 7.0215 0.6730 0.7396
151 7.0686 0.7071 0.7071
152 7.1157 0.7396 0.6730
153 7.1628 0.7705 0.6374
154 7.2100 0.7997 0.6004
155 7.2571 0.8271 0.5621
156 7.3042 0.8526 0.5225
157 7.3513 0.8763 0.4818
158 7.3985 0.8980 0.4399
159 7.4456 0.9178 0.3971
160 7.4927 0.9354 0.3535
161 7.5398 0.9511 0.3090
162 7.5869 0.9646 0.2639
163 7.6341 0.9759 0.2181
164 7.6812 0.9851 0.1719
165 7.7283 0.9921 0.1253
166 7.7754 0.9969 0.0785
167 7.8226 0.9995 0.0314
168 7.8697 0.9999 -0.0157
169 7.9168 0.9980 -0.0628
170 7.9639 0.9940 -0.1097
171 8.0111 0.9877 -0.1564
172 8.0582 0.9792 -0.2028
173 8.1053 0.9686 -0.2487
174 8.1524 0.9558 -0.2940
175 8.1996 0.9409 -0.3387
176 8.2467 0.9239 -0.3827
177 8.2938 0.9048 -0.4258
178 8.3409 0.8838 -0.4679
179 8.3881 0.8607 -0.5090
180 8.4352 0.8358 -0.5490
181 8.4823 0.8090 -0.5878
182 8.5294 0.7804 -0.6252
183 8.5765 0.7501 -0.6613
184 8.6237 0.7181 -0.6959
185 8.6708 0.6845 -0.7290
186 8.7179 0.6494 -0.7604
187 8.7650 0.6129 -0.7902
188 8.8122 0.5750 -0.8181
189 8.8593 0.5358 -0.8443
190 8.9064 0.4955 -0.8686
191 8.9535 0.4540 -0.8910
192 9.0007 0.4115 -0.9114
193 9.0478 0.3681 -0.9298
194 9.0949 0.3239 -0.9461
195 9.1420 0.2790 -0.9603
196 9.1892 0.2334 -0.9724
197 9.2363 0.1874 -0.9823
198 9.2834 0.1409 -0.9900
199 9.3305 0.0941 -0.9956
200 9.3777 0.0471 -0.9989
201 9.4248 0.0000 -1.0000
creating the dataframe
inc = locals().setdefault("inc", 2) + 1
df = pandas.concat([
(x := Series(numpy.linspace(0, inc*numpy.pi, 201))).rename("x"),
x.apply(numpy.sin).rename("y"), x.apply(numpy.cos).rename("z")
], axis=1)
source code html
{% set format="%.4f" %}
<table role=table style="--x-min: {{df.x.min()}}; --y-min: {{df.y.min()}}; --z-min: {{df.z.min()}}; --x-max: {{df.x.max()}}; --y-max: {{df.y.max()}}; --z-max: {{df.z.max()}};">
<caption>a sin wave</caption>
<thead role=rowgroup class=visually-hidden>
<tr>
<th>index</th><th>x</th><th>y</th><th>z</th>
</tr>
</thead>
<tbody role=rowgroup>{% for i, row in df.iterrows() %}
<tr role=row style="--index: {{loop.index}}; --x: {{row.x}}; --y: {{row.y}}; --z: {{row.z}}">
<th>{{loop.index}}</th><td>{{format % row.x}}</td><td>{{format % row.y}}</td><td>{{format % row.z}}</td>
</tr>
{%- endfor %}</tbody>
</table>
<figure>
<figcaption>creating the dataframe</figcaption>
