skip to main content

@tonyfast s notebooks

site navigation
notebook summary
title
nonvisual data frames and heat maps
description
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.
cells
14 total
10 code
state
executed out of order
kernel
Python [conda env:p311] *
language
python
name
conda-env-p311-py
lines of code
78
outputs
11
table of contents
{"kernelspec": {"display_name": "Python [conda env:p311] *", "language": "python", "name": "conda-env-p311-py"}, "language_info": {"codemirror_mode": {"name": "ipython", "version": 3}, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.3"}, "widgets": {"application/vnd.jupyter.widget-state+json": {"state": {}, "version_major": 2, "version_minor": 0}}, "title": "nonvisual data frames and heat maps", "description": "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."}
notebook toolbar
]
cell ordering

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 . 

/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")
  1. 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.
  2. we understand the need for better nonvisual dataframes for equitable data science experiences for BVI students.
  3. 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.
  4. 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

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)
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
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
    )
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

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

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.