nonvisual data frames and heat maps¤

in this stream, tony is visited by khalid to talk about representing information in nonvisual ways. i met khalid during the nonvisual data science course taught be the iota school. in this class, he was talking about his challenges in producing and interpretting a heatmap. since then, i've been thinking about how to do better. this stream is our first meeting where we acheive our goals of designing better nonvisual/visual heatmaps.

since, we've been coordinating community on the blindcoders mailing list.

%%
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/uF9VpP-mrSE?si=henKrAC5fY7AxLTR" title="YouTube video player" width="560"></iframe>

/home/tbone/mambaforge/envs/p311/lib/python3.11/site-packages/IPython/core/display.py:431: UserWarning: Consider using IPython.display.IFrame instead
  warnings.warn("Consider using IPython.display.IFrame instead")

we start by understanding the experience of a blind data scientist navigating post graduate work. we learn about the challenges associated with AI and notebooks.
we understand the need for better nonvisual dataframes for equitable data science experiences for BVI students.
we iterate on table representations with khalid providing feedback about the screen reader experience while we practice communicating nonvisual data science topics. we consider the utility of tables and dataframes in exploring data.
finally, we make a visual and nonvisual dataframe representations out of tables and css. this approach provides automony to BVI data scientists allowing them to experience the data themselves.

%%
## ai interpretting visualizations

<dl><dt>

[2:57](https://www.youtube.com/live/uF9VpP-mrSE?t=177s)
</dt><dd>

Khalid describes intpretting data using [be my eyes](https://www.bemyeyes.com/), [be my ai](https://www.bemyeyes.com/blog/introducing-be-my-ai), [JAWS picture](https://blog.freedomscientific.com/picture-smart-in-jaws-independently-selecting-your-artwork/), openai, and claude. eventually he had to rely on a person to support him. data literacy among

</dd></dl>

ai interpretting visualizations

2:57: Khalid describes intpretting data using be my eyes, be my ai, JAWS picture, openai, and claude. eventually he had to rely on a person to support him. data literacy among

example heatmap of the correlation matrix¤

    Image(
        "corrs/corr_cryptos/Correlation Matrix of Cryptocurrencies (2022-04-01 to 2024-03-31).png"
    )

No description has been provided for this image

a list of the files khalid generated for his homework

    ls corrs/corr_cryptos/

'ADA-USD vs. ALGO-USD (Positive Correlation).png'
'ADA-USD vs. BAT-USD (Positive Correlation).png'
'ADA-USD vs. DASH-USD (Positive Correlation).png'
'ADA-USD vs. OMG-USD (Positive Correlation).png'
'ADA-USD vs. TRX-USD (Negative Correlation).png'
'ADA-USD vs. UNI-USD (Negative Correlation).png'
'ADA-USD vs. XMR-USD (Negative Correlation).png'
'ADA-USD vs. ZEC-USD (Negative Correlation).png'
'BTC-USD vs. BCH-USD (Positive Correlation).png'
'BTC-USD vs. DCR-USD (Negative Correlation).png'
'BTC-USD vs. FTM-USD (Positive Correlation).png'
'BTC-USD vs. ICX-USD (Positive Correlation).png'
'BTC-USD vs. TON-USD (Positive Correlation).png'
'BTC-USD vs. TRX-USD (Negative Correlation).png'
'BTC-USD vs. UNI-USD (Negative Correlation).png'
'BTC-USD vs. ZEC-USD (Negative Correlation).png'
'Correlation Matrix of Cryptocurrencies (2022-04-01 to 2024-03-31).png'
'LTC-USD vs. ATOM-USD (Positive Correlation).png'
'LTC-USD vs. DOGE-USD (Positive Correlation).png'
'LTC-USD vs. ETC-USD (Positive Correlation).png'
'LTC-USD vs. MANA-USD (Negative Correlation).png'
'LTC-USD vs. TRX-USD (Negative Correlation).png'
'LTC-USD vs. UNI-USD (Negative Correlation).png'
'LTC-USD vs. XRP-USD (Positive Correlation).png'
'LTC-USD vs. ZEC-USD (Negative Correlation).png'
'Top Correlations with ADA-USD (2022-04-01 to 2024-03-31).png'
'Top Correlations with BTC-USD (2022-04-01 to 2024-03-31).png'
'Top Correlations with LTC-USD (2022-04-01 to 2024-03-31).png'
'Top Correlations with XRP-USD (2022-04-01 to 2024-03-31).png'
'XRP-USD vs. BNB-USD (Positive Correlation).png'
'XRP-USD vs. DCR-USD (Negative Correlation).png'
'XRP-USD vs. DOGE-USD (Positive Correlation).png'
'XRP-USD vs. ETC-USD (Positive Correlation).png'
'XRP-USD vs. ETH-USD (Positive Correlation).png'
'XRP-USD vs. TRX-USD (Negative Correlation).png'
'XRP-USD vs. UNI-USD (Negative Correlation).png'
'XRP-USD vs. ZEC-USD (Negative Correlation).png'

    from nbconvert_a11y.t import get_table
    from nbconvert_a11y.t import Config, CssVarGrouping

    show = compose_left(get_table, str, HTML)

%%
loading the correlated crypto data

    df = pandas.read_csv(
        "crypto_data_correlation_2022-04-01_to_2024-03-31_normalised.csv"
    ).set_index("Date")
    df.columns = df.columns.str.rstrip("-USD")
    df.pipe(show, caption="a subset of the crypto time series from 2022 to 2024")

a subset of the crypto time series from 2022 to 2024
Date	ETH	XLM	BCH	DASH	NEO	...	MANA	AGIX	TON	AAVE	MKR
2022-04-01	0.80	0.97	0.54	0.95	1.00	...	0.97	0.09	0.95	1.00	0.55
2022-04-02	0.80	0.98	0.53	0.95	0.98	...	0.97	0.09	1.00	0.96	0.53
2022-04-03	0.82	1.00	0.54	1.00	1.00	...	1.00	0.10	0.94	0.99	0.55
2022-04-04	0.82	0.97	0.54	1.00	0.96	...	0.97	0.10	0.87	0.96	0.59
2022-04-05	0.79	0.93	0.52	0.95	0.90	...	0.93	0.09	0.85	0.88	0.55
2022-04-06	0.71	0.80	0.45	0.82	0.75	...	0.84	0.08	0.73	0.72	0.48
2022-04-07	0.73	0.85	0.46	0.85	0.78	...	0.88	0.09	0.77	0.78	0.48
2022-04-08	0.72	0.79	0.44	0.79	0.72	...	0.81	0.08	0.72	0.68	0.47
2022-04-09	0.74	0.81	0.44	0.83	0.75	...	0.84	0.08	0.73	0.69	0.49
2022-04-10	0.72	0.79	0.43	0.80	0.71	...	0.82	0.09	0.72	0.65	0.47
...	...					...	...
						2024-03-21						0.81	0.37	0.61	0.10	0.40	...	0.15	0.74	0.40	0.38	0.89
						2024-03-22						0.76	0.34	0.64	0.09	0.38	...	0.14	0.72	0.41	0.35	0.81
						2024-03-23						0.76	0.37	0.69	0.10	0.39	...	0.15	0.74	0.39	0.37	0.78
						2024-03-24						0.80	0.38	0.74	0.11	0.42	...	0.16	0.80	0.42	0.38	0.82
						2024-03-25						0.85	0.40	0.75	0.12	0.44	...	0.16	0.84	0.48	0.40	0.86
						2024-03-26						0.84	0.40	0.73	0.13	0.46	...	0.17	0.85	0.48	0.42	0.84
						2024-03-27						0.82	0.38	0.85	0.12	0.44	...	0.16	0.93	0.44	0.39	0.86
						2024-03-28						0.84	0.40	0.90	0.13	0.46	...	0.17	1.00	0.46	0.40	0.96
						2024-03-29						0.82	0.43	1.00	0.14	0.49	...	0.17	0.94	0.46	0.40	0.97
						2024-03-30						0.82	0.41	0.95	0.13	0.46	...	0.16	0.94	0.45	0.38	1.00
						Date						ETH	XLM	BCH	DASH	NEO	...	MANA	AGIX	TON	AAVE	MKR
						count						730.00	730.00	730.00	730.00	730.00	...	730.00	730.00	730.00	730.00	730.00
						mean						0.29	0.26	0.18	0.18	0.20	...	0.20	0.15	0.15	0.20	0.18
						std						0.19	0.16	0.16	0.17	0.16	...	0.16	0.16	0.17	0.16	0.14
						min						0.00	0.00	0.00	0.00	0.00	...	0.00	0.00	0.00	0.00	0.00
						25%						0.18	0.13	0.05	0.07	0.10	...	0.10	0.05	0.01	0.09	0.08
						50%						0.26	0.25	0.10	0.16	0.16	...	0.16	0.11	0.11	0.17	0.15
						75%						0.34	0.32	0.28	0.24	0.27	...	0.27	0.19	0.20	0.27	0.23
						max						1.00	1.00	1.00	1.00	1.00	...	1.00	1.00	1.00	1.00	1.00

loading the correlated crypto data

df = pandas.read_csv(
    "crypto_data_correlation_2022-04-01_to_2024-03-31_normalised.csv"
).set_index("Date")
df.columns = df.columns.str.rstrip("-USD")
df.pipe(show, caption="a subset of the crypto time series from 2022 to 2024")

    table_config = Config(
        data_visibility=Config.DataVisibility(max_rows=1000, max_cols=1000,), 
        css=Config.Css(var_grouping=CssVarGrouping.cell),
        summary_footer=False
    )

%%
nonvisual representation of the pearson correlation coefficient of the currencies.

    df.corr().pipe(
        compose_left(show, display), config=table_config,
        id="crypto", caption="correlation matrix of crypto cyrrencies. \
        each element is the pearson correlation coefficient for the currency in the row and column"
    )

visual styling to make the table appear as a heatmap. this needs more design, but the gist is there.

```html
<style>
#crypto {
    td {
        background-color: rgba(
            calc(var(--val) * 255), calc(var(--val) * 255), calc(var(--val) * 255), 1
        );
        font-size: 0px;
        &:hover {
            font-size: 1em;
        }
    }
}
</style>
```

correlation matrix of crypto cyrrencies. each element is the pearson correlation coefficient for the currency in the row and column
index 1	ETH	XLM	BCH	DASH	NEO	DOGE	BNB	TRX	EO	WAVE	QTUM	SC	BAT	DCR	ETC	ZEC	XTZ	OMG	XMR	ATOM	AVAX	LINK	ALGO	DOT	UNI	ICX	FTM	FIL	SAN	MANA	AGIX	TON	AAVE	MKR
ETH	1.00	0.63	0.87	0.23	0.82	0.78	0.76	0.71	0.32	0.41	0.72	0.85	0.40	0.36	0.54	0.21	0.38	0.23	0.39	0.46	0.81	0.84	0.30	0.63	-0.06	0.57	0.78	0.64	0.33	0.39	0.70	0.77	0.76	0.84
XLM	0.63	1.00	0.67	0.45	0.73	0.53	0.37	0.28	0.56	0.74	0.80	0.59	0.71	0.64	0.51	0.64	0.69	0.59	0.63	0.55	0.75	0.49	0.62	0.78	-0.01	0.80	0.64	0.77	0.68	0.70	0.08	0.79	0.79	0.60
BCH	0.87	0.67	1.00	0.03	0.64	0.69	0.55	0.73	0.11	0.31	0.58	0.70	0.26	0.21	0.35	0.10	0.22	0.07	0.33	0.24	0.65	0.78	0.14	0.46	-0.06	0.42	0.61	0.48	0.18	0.23	0.63	0.62	0.63	0.89
DASH	0.23	0.45	0.03	1.00	0.64	0.45	0.45	-0.40	0.91	0.80	0.74	0.28	0.85	0.87	0.50	0.87	0.84	0.92	0.67	0.85	0.60	-0.01	0.85	0.80	-0.01	0.83	0.71	0.83	0.88	0.88	-0.09	0.64	0.65	-0.03
NEO	0.82	0.73	0.64	0.64	1.00	0.73	0.71	0.36	0.68	0.73	0.93	0.79	0.75	0.67	0.64	0.58	0.72	0.64	0.61	0.74	0.91	0.68	0.65	0.87	-0.04	0.85	0.91	0.88	0.69	0.74	0.43	0.95	0.92	0.61
DOGE	0.78	0.53	0.69	0.45	0.73	1.00	0.85	0.34	0.50	0.47	0.71	0.64	0.52	0.54	0.52	0.38	0.50	0.43	0.40	0.60	0.77	0.63	0.51	0.68	-0.06	0.59	0.82	0.69	0.46	0.50	0.59	0.71	0.73	0.64
BNB	0.76	0.37	0.55	0.45	0.71	0.85	1.00	0.32	0.53	0.40	0.69	0.67	0.50	0.54	0.65	0.33	0.51	0.43	0.26	0.61	0.73	0.58	0.49	0.64	-0.02	0.53	0.81	0.65	0.43	0.48	0.66	0.66	0.67	0.60
TRX	0.71	0.28	0.73	-0.40	0.36	0.34	0.32	1.00	-0.31	-0.13	0.20	0.66	-0.15	-0.24	0.13	-0.35	-0.17	-0.35	-0.07	-0.17	0.36	0.84	-0.26	0.06	-0.05	-0.01	0.22	0.04	-0.25	-0.19	0.65	0.34	0.30	0.79
EO	0.32	0.56	0.11	0.91	0.68	0.50	0.53	-0.31	1.00	0.83	0.82	0.37	0.92	0.95	0.72	0.91	0.93	0.95	0.64	0.89	0.69	0.10	0.93	0.87	0.01	0.87	0.70	0.88	0.93	0.92	-0.11	0.72	0.74	0.09
WAVE	0.41	0.74	0.31	0.80	0.73	0.47	0.40	-0.13	0.83	1.00	0.84	0.48	0.91	0.85	0.58	0.88	0.89	0.88	0.64	0.80	0.76	0.24	0.87	0.89	-0.01	0.92	0.74	0.90	0.92	0.92	-0.14	0.79	0.81	0.29
QTUM	0.72	0.80	0.58	0.74	0.93	0.71	0.69	0.20	0.82	0.84	1.00	0.70	0.90	0.85	0.75	0.77	0.88	0.81	0.67	0.79	0.90	0.53	0.82	0.95	-0.03	0.93	0.88	0.96	0.85	0.88	0.24	0.95	0.95	0.55
SC	0.85	0.59	0.70	0.28	0.79	0.64	0.67	0.66	0.37	0.48	0.70	1.00	0.50	0.42	0.57	0.30	0.48	0.34	0.31	0.47	0.85	0.85	0.42	0.68	-0.04	0.58	0.70	0.66	0.42	0.47	0.49	0.79	0.76	0.80
BAT	0.40	0.71	0.26	0.85	0.75	0.52	0.50	-0.15	0.92	0.91	0.90	0.50	1.00	0.95	0.69	0.93	0.98	0.95	0.61	0.81	0.78	0.24	0.95	0.94	-0.01	0.93	0.74	0.93	0.98	0.98	-0.10	0.83	0.82	0.28
DCR	0.36	0.64	0.21	0.87	0.67	0.54	0.54	-0.24	0.95	0.85	0.85	0.42	0.95	1.00	0.68	0.95	0.96	0.96	0.65	0.83	0.73	0.15	0.96	0.91	0.02	0.89	0.70	0.90	0.95	0.95	-0.13	0.75	0.77	0.20
ETC	0.54	0.51	0.35	0.50	0.64	0.52	0.65	0.13	0.72	0.58	0.75	0.57	0.69	0.68	1.00	0.55	0.71	0.62	0.38	0.71	0.68	0.45	0.65	0.71	0.00	0.61	0.61	0.71	0.63	0.66	0.17	0.67	0.74	0.40
ZEC	0.21	0.64	0.10	0.87	0.58	0.38	0.33	-0.35	0.91	0.88	0.77	0.30	0.93	0.95	0.55	1.00	0.95	0.97	0.67	0.76	0.63	0.01	0.95	0.86	0.01	0.88	0.59	0.84	0.97	0.95	-0.32	0.68	0.69	0.08
XTZ	0.38	0.69	0.22	0.84	0.72	0.50	0.51	-0.17	0.93	0.89	0.88	0.48	0.98	0.96	0.71	0.95	1.00	0.97	0.61	0.81	0.75	0.21	0.97	0.93	0.01	0.91	0.70	0.91	0.98	0.98	-0.13	0.80	0.80	0.25
OMG	0.23	0.59	0.07	0.92	0.64	0.43	0.43	-0.35	0.95	0.88	0.81	0.34	0.95	0.96	0.62	0.97	0.97	1.00	0.62	0.82	0.66	0.05	0.97	0.88	0.01	0.88	0.65	0.87	0.97	0.96	-0.22	0.71	0.71	0.08
XMR	0.39	0.63	0.33	0.67	0.61	0.40	0.26	-0.07	0.64	0.64	0.67	0.31	0.61	0.65	0.38	0.67	0.61	0.62	1.00	0.66	0.58	0.19	0.58	0.67	-0.04	0.73	0.60	0.68	0.66	0.66	-0.10	0.63	0.70	0.17
ATOM	0.46	0.55	0.24	0.85	0.74	0.60	0.61	-0.17	0.89	0.80	0.79	0.47	0.81	0.83	0.71	0.76	0.81	0.82	0.66	1.00	0.75	0.28	0.83	0.84	0.01	0.82	0.80	0.87	0.82	0.84	0.06	0.73	0.80	0.19
AVAX	0.81	0.75	0.65	0.60	0.91	0.77	0.73	0.36	0.69	0.76	0.90	0.85	0.78	0.73	0.68	0.63	0.75	0.66	0.58	0.75	1.00	0.71	0.73	0.92	-0.03	0.84	0.90	0.90	0.74	0.77	0.32	0.93	0.93	0.69
LINK	0.84	0.49	0.78	-0.01	0.68	0.63	0.58	0.84	0.10	0.24	0.53	0.85	0.24	0.15	0.45	0.01	0.21	0.05	0.19	0.28	0.71	1.00	0.16	0.45	-0.04	0.35	0.56	0.43	0.14	0.20	0.60	0.66	0.65	0.86
ALGO	0.30	0.62	0.14	0.85	0.65	0.51	0.49	-0.26	0.93	0.87	0.82	0.42	0.95	0.96	0.65	0.95	0.97	0.97	0.58	0.83	0.73	0.16	1.00	0.91	0.03	0.87	0.66	0.88	0.96	0.95	-0.18	0.74	0.75	0.18
DOT	0.63	0.78	0.46	0.80	0.87	0.68	0.64	0.06	0.87	0.89	0.95	0.68	0.94	0.91	0.71	0.86	0.93	0.88	0.67	0.84	0.92	0.45	0.91	1.00	-0.02	0.95	0.86	0.98	0.92	0.94	0.09	0.91	0.91	0.46
UNI	-0.06	-0.01	-0.06	-0.01	-0.04	-0.06	-0.02	-0.05	0.01	-0.01	-0.03	-0.04	-0.01	0.02	0.00	0.01	0.01	0.01	-0.04	0.01	-0.03	-0.04	0.03	-0.02	1.00	-0.03	-0.05	-0.02	-0.00	-0.01	-0.05	-0.03	-0.00	-0.02
ICX	0.57	0.80	0.42	0.83	0.85	0.59	0.53	-0.01	0.87	0.92	0.93	0.58	0.93	0.89	0.61	0.88	0.91	0.88	0.73	0.82	0.84	0.35	0.87	0.95	-0.03	1.00	0.83	0.96	0.93	0.94	0.02	0.90	0.88	0.37
FTM	0.78	0.64	0.61	0.71	0.91	0.82	0.81	0.22	0.70	0.74	0.88	0.70	0.74	0.70	0.61	0.59	0.70	0.65	0.60	0.80	0.90	0.56	0.66	0.86	-0.05	0.83	1.00	0.88	0.70	0.75	0.47	0.87	0.87	0.57
FIL	0.64	0.77	0.48	0.83	0.88	0.69	0.65	0.04	0.88	0.90	0.96	0.66	0.93	0.90	0.71	0.84	0.91	0.87	0.68	0.87	0.90	0.43	0.88	0.98	-0.02	0.96	0.88	1.00	0.91	0.93	0.14	0.91	0.91	0.45
SAN	0.33	0.68	0.18	0.88	0.69	0.46	0.43	-0.25	0.93	0.92	0.85	0.42	0.98	0.95	0.63	0.97	0.98	0.97	0.66	0.82	0.74	0.14	0.96	0.92	-0.00	0.93	0.70	0.91	1.00	0.99	-0.20	0.77	0.78	0.18
MANA	0.39	0.70	0.23	0.88	0.74	0.50	0.48	-0.19	0.92	0.92	0.88	0.47	0.98	0.95	0.66	0.95	0.98	0.96	0.66	0.84	0.77	0.20	0.95	0.94	-0.01	0.94	0.75	0.93	0.99	1.00	-0.12	0.81	0.81	0.23
AGIX	0.70	0.08	0.63	-0.09	0.43	0.59	0.66	0.65	-0.11	-0.14	0.24	0.49	-0.10	-0.13	0.17	-0.32	-0.13	-0.22	-0.10	0.06	0.32	0.60	-0.18	0.09	-0.05	0.02	0.47	0.14	-0.20	-0.12	1.00	0.30	0.26	0.60
TON	0.77	0.79	0.62	0.64	0.95	0.71	0.66	0.34	0.72	0.79	0.95	0.79	0.83	0.75	0.67	0.68	0.80	0.71	0.63	0.73	0.93	0.66	0.74	0.91	-0.03	0.90	0.87	0.91	0.77	0.81	0.30	1.00	0.95	0.63
AAVE	0.76	0.79	0.63	0.65	0.92	0.73	0.67	0.30	0.74	0.81	0.95	0.76	0.82	0.77	0.74	0.69	0.80	0.71	0.70	0.80	0.93	0.65	0.75	0.91	-0.00	0.88	0.87	0.91	0.78	0.81	0.26	0.95	1.00	0.63
MKR	0.84	0.60	0.89	-0.03	0.61	0.64	0.60	0.79	0.09	0.29	0.55	0.80	0.28	0.20	0.40	0.08	0.25	0.08	0.17	0.19	0.69	0.86	0.18	0.46	-0.02	0.37	0.57	0.45	0.18	0.23	0.60	0.63	0.63	1.00
index 1	ETH	XLM	BCH	DASH	NEO	DOGE	BNB	TRX	EO	WAVE	QTUM	SC	BAT	DCR	ETC	ZEC	XTZ	OMG	XMR	ATOM	AVAX	LINK	ALGO	DOT	UNI	ICX	FTM	FIL	SAN	MANA	AGIX	TON	AAVE	MKR

nonvisual representation of the pearson correlation coefficient of the currencies.

df.corr().pipe(
    compose_left(show, display), config=table_config,
    id="crypto", caption="correlation matrix of crypto cyrrencies. \
    each element is the pearson correlation coefficient for the currency in the row and column"
)

visual styling to make the table appear as a heatmap. this needs more design, but the gist is there.

<style>
#crypto {
    td {
        background-color: rgba(
            calc(var(--val) * 255), calc(var(--val) * 255), calc(var(--val) * 255), 1
        );
        font-size: 0px;
        &:hover {
            font-size: 1em;
        }
    }
}
</style>

%%
## audible, visual and tactile dataframe accessibility

<dl>
<dt>

[45:00](https://www.youtube.com/live/uF9VpP-mrSE?t=2700s)

 </dt><dd>

&gt;  Tables are not pictures of data: they are catalogues of data to be perused, parsed, referenced and interrogated. A well-designed table will enable the information to be read and understood, and will reveal the patterns and correlations inherent in the data.
&gt;&gt; * https://alistapart.com/article/web-typography-tables/
</dd>
</dl>

### useful links about accessible table and type design

* https://racheleditullio.com/blog/2020/03/5-ways-to-improve-table-accessibility/
* https://adrianroselli.com/2017/11/a-responsive-accessible-table.html
* https://adrianroselli.com/2017/11/hey-its-still-ok-to-use-tables.html
* https://readings.design/PDF/ThePrinciplesoftheNewTypography.pdf
* https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-02-20-multiindex-html.html
* https://www.highcharts.com/docs/accessibility/patterns-and-contrast
* https://github.com/Chartability/POUR-CAF

audible, visual and tactile dataframe accessibility

45:00

Tables are not pictures of data: they are catalogues of data to be perused, parsed, referenced and interrogated. A well-designed table will enable the information to be read and understood, and will reveal the patterns and correlations inherent in the data.

https://alistapart.com/article/web-typography-tables/