Heatmap Matrix

Interactive square heatmap for visualizing pairwise relationships. Inspired by the Binary Phase Diagram Map from the Sun Research Group.

Element Pair Electronegativity Difference

Full 118-element matrix colored by |ΔEN|. Elements without electronegativity data (noble gases, some superheavy) are auto-hidden with hide_empty="compact". Hover for tooltips, click cells for details.

H
Li
Be
B
C
N
O
F
Na
Mg
Al
Si
P
S
Cl
K
Ca
Sc
Ti
V
Cr
Mn
Fe
Co
Ni
Cu
Zn
Ga
Ge
As
Se
Br
Kr
Rb
Sr
Y
Zr
Nb
Mo
Tc
Ru
Rh
Pd
Ag
Cd
In
Sn
Sb
Te
I
Xe
Cs
Ba
La
Ce
Pr
Nd
Pm
Sm
Eu
Gd
Tb
Dy
Ho
Er
Tm
Yb
Lu
Hf
Ta
W
Re
Os
Ir
Pt
Au
Hg
Tl
Pb
Bi
Po
At
Rn
Fr
Ra
Ac
Th
Pa
U
Np
Pu
Am
Cm
Bk
Cf
Es
Fm
Md
No
Lr
H
Li
Be
B
C
N
O
F
Na
Mg
Al
Si
P
S
Cl
K
Ca
Sc
Ti
V
Cr
Mn
Fe
Co
Ni
Cu
Zn
Ga
Ge
As
Se
Br
Kr
Rb
Sr
Y
Zr
Nb
Mo
Tc
Ru
Rh
Pd
Ag
Cd
In
Sn
Sb
Te
I
Xe
Cs
Ba
La
Ce
Pr
Nd
Pm
Sm
Eu
Gd
Tb
Dy
Ho
Er
Tm
Yb
Lu
Hf
Ta
W
Re
Os
Ir
Pt
Au
Hg
Tl
Pb
Bi
Po
At
Rn
Fr
Ra
Ac
Th
Pa
U
Np
Pu
Am
Cm
Bk
Cf
Es
Fm
Md
No
Lr
Value
00.511.522.533.5

Symmetric Subset with Custom Tooltip

20 metals with switchable symmetric mode (lower/upper/off) and interpolatePlasma color scale. Custom tooltip shows element names and electronegativity values. Double-click updates the status text below. Use the controls (gear icon) to toggle symmetric mode.

Li
Na
Mg
Al
Si
K
Ca
Ti
V
Cr
Mn
Fe
Co
Ni
Cu
Zn
Ge
Ag
Pt
Au
Li
Na
Mg
Al
Si
K
Ca
Ti
V
Cr
Mn
Fe
Co
Ni
Cu
Zn
Ge
Ag
Pt
Au

Arbitrary Axis Items

Axes don't have to be elements. This demo uses property-range bins as both axes, showing that HeatmapMatrix works with any AxisItem[]. Uses interpolateYlOrRd color scale and a custom cell snippet that renders the value inside each tile.

0-1
1-2
2-3
3-4
4-5
5-6
6-7
7+
0-1
18
24
28
30
28
24
18
14
1-2
24
32
41
45
41
32
24
17
2-3
28
41
57
67
57
41
28
19
3-4
30
45
67
100
67
45
30
20
4-5
28
41
57
67
57
41
28
19
5-6
24
32
41
45
41
32
24
17
6-7
18
24
28
30
28
24
18
14
7+
14
17
19
20
19
17
14
10