@@ -156,6 +156,100 @@ fig = px.imshow(z, text_auto=".2f", color_continuous_scale='Greys', aspect="auto
156
156
fig.show()
157
157
```
158
158
159
+ Here is a fairly contrived example showing how one can display a periodic table with custom text and hover using ` ff.create_annotated_heatmap() ` (scroll below to see the ` px.imshow() ` equivalent).
160
+
161
+ ``` python
162
+ # Add Periodic Table Data
163
+ symbol = [[' H' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' He' ],
164
+ [' Li' , ' Be' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' B' , ' C' , ' N' , ' O' , ' F' , ' Ne' ],
165
+ [' Na' , ' Mg' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' Al' , ' Si' , ' P' , ' S' , ' Cl' , ' Ar' ],
166
+ [' K' , ' Ca' , ' Sc' , ' Ti' , ' V' , ' Cr' , ' Mn' , ' Fe' , ' Co' , ' Ni' , ' Cu' , ' Zn' , ' Ga' , ' Ge' , ' As' , ' Se' , ' Br' , ' Kr' ],
167
+ [' Rb ' , ' Sr' , ' Y' , ' Zr' , ' Nb' , ' Mo' , ' Tc' , ' Ru' , ' Rh' , ' Pd' , ' Ag' , ' Cd' , ' In' , ' Sn' , ' Sb' , ' Te' , ' I' , ' Xe' ],
168
+ [' Cs' , ' Ba' , ' ' , ' Hf' , ' Ta' , ' W' , ' Re' , ' Os' , ' Ir' , ' Pt' , ' Au' , ' Hg' , ' Tl' , ' Pb' , ' Bi' , ' Po' , ' At' , ' Rn' ],
169
+ [' Fr' , ' Ra' , ' ' , ' Rf' , ' Db' , ' Sg' , ' Bh' , ' Hs' , ' Mt' , ' Ds' , ' Rg' , ' Cn' , ' Uut' , ' Fl' , ' Uup' , ' Lv' , ' Uus' , ' Uuo' ],
170
+ [' ' , ' ' , ' La' , ' Ce' , ' Pr' , ' Nd' , ' Pm' , ' Sm' , ' Eu' , ' Gd' , ' Tb' , ' Dy' , ' Ho' , ' Er' , ' Tm' , ' Yb' , ' Lu' , ' ' ],
171
+ [' ' , ' ' , ' Ac' , ' Th' , ' Pa' , ' U' , ' Np' , ' Pu' , ' Am' , ' Cm' , ' Bk' , ' Cf' , ' Es' , ' Fm' , ' Md' , ' No' , ' Lr' , ' ' ],
172
+ [' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' ],
173
+ [' ' , ' Alkali Metal' , ' ' , ' ' , ' Transition Metal' , ' ' , ' ' , ' Actinide' , ' ' , ' ' , ' Semimetal' , ' ' , ' ' , ' Halogen' , ' ' , ' ' , ' ' , ' ' ],
174
+ [' ' , ' Alkaline Metal' , ' ' , ' ' , ' Lanthanide' , ' ' , ' ' , ' Basic Metal' , ' ' , ' ' , ' Nonmetal' , ' ' , ' ' , ' Noble Gas' , ' ' , ' ' , ' ' , ' ' ]]
175
+
176
+ element = [[' Hydrogen' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' Helium' ],
177
+ [' Lithium' , ' Beryllium' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' Boron' , ' Carbon' , ' Nitrogen' , ' Oxygen' , ' Fluorine' , ' Neon' ],
178
+ [' Sodium' , ' Magnesium' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' Aluminium' , ' Silicon' , ' Phosphorus' , ' Sulfur' , ' Chlorine' , ' Argon' ],
179
+ [' Potassium' , ' Calcium' , ' Scandium' , ' Titanium' , ' Vanadium' , ' Chromium' , ' Manganese' , ' Iron' , ' Cobalt' , ' Nickel' , ' Copper' , ' Zinc' , ' Gallium' , ' Germanium' , ' Arsenic' , ' Selenium' , ' Bromine' , ' Krypton' ],
180
+ [' Rubidium' , ' Strontium' , ' Yttrium' , ' Zirconium' , ' Niobium' , ' Molybdenum' , ' Technetium' , ' Ruthenium' , ' Rhodium' , ' Palladium' , ' Silver' , ' Cadmium' , ' Indium' , ' Tin' , ' Antimony' , ' Tellurium' , ' Iodine' , ' Xenon' ],
181
+ [' Cesium' , ' Barium' , ' ' , ' Hafnium' , ' Tantalum' , ' Tungsten' , ' Rhenium' , ' Osmium' , ' Iridium' , ' Platinum' , ' Gold' , ' Mercury' , ' Thallium' , ' Lead' , ' Bismuth' , ' Polonium' , ' Astatine' , ' Radon' ],
182
+ [' Francium' , ' Radium' , ' ' , ' Rutherfordium' ,' Dubnium' ,' Seaborgium' ,' Bohrium' ,' Hassium' ,' Meitnerium' ,' Darmstadtium' ,' Roentgenium' ,' Copernicium' ,' Ununtrium' ,' Ununquadium' ,' Ununpentium' ,' Ununhexium' ,' Ununseptium' ,' Ununoctium' ],
183
+ [' ' , ' ' , ' Lanthanum' , ' Cerium' , ' Praseodymium' , ' Neodymium' , ' Promethium' , ' Samarium' , ' Europium' , ' Gadolinium' , ' Terbium' , ' Dysprosium' , ' Holmium' , ' Erbium' , ' Thulium' , ' Ytterbium' , ' Lutetium' , ' ' ],
184
+ [' ' , ' ' , ' Actinium' , ' Thorium' , ' Protactinium' , ' Uranium' , ' Neptunium' , ' Plutonium' , ' Americium' , ' Curium' , ' Berkelium' , ' Californium' , ' Einsteinium' ,' Fermium' ,' Mendelevium' , ' Nobelium' , ' Lawrencium' , ' ' ],
185
+ [' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' ],
186
+ [' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' ],
187
+ [' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' , ' ' ]]
188
+
189
+ atomic_mass = [[ 1.00794 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , 4.002602 ],
190
+ [ 6.941 , 9.012182 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , 10.811 , 12.0107 , 14.0067 , 15.9994 , 18.9984032 , 20.1797 ],
191
+ [ 22.98976928 , 24.3050 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , 26.9815386 , 28.0855 , 30.973762 , 32.065 , 35.453 , 39.948 ],
192
+ [ 39.0983 , 40.078 , 44.955912 , 47.867 , 50.9415 , 51.9961 , 54.938045 , 55.845 , 58.933195 , 58.6934 , 63.546 , 65.38 , 69.723 , 72.64 , 74.92160 , 78.96 , 79.904 , 83.798 ],
193
+ [ 85.4678 , 87.62 , 88.90585 , 91.224 , 92.90638 , 95.96 , 98 , 101.07 , 102.90550 , 106.42 , 107.8682 , 112.411 , 114.818 , 118.710 , 121.760 , 127.60 , 126.90447 , 131.293 ],
194
+ [ 132.9054519 , 137.327 , .0 , 178.49 , 180.94788 , 183.84 , 186.207 , 190.23 , 192.217 , 195.084 , 196.966569 , 200.59 , 204.3833 , 207.2 , 208.98040 , 209 , 210 , 222 ],
195
+ [223 , 226 , .0 , 267 , 268 , 271 , 272 , 270 , 276 , 281 , 280 , 285 , 284 , 289 , 288 , 293 , ' unknown' , 294 ],
196
+ [.0 , .0 , 138.90547 , 140.116 , 140.90765 , 144.242 , 145 , 150.36 , 151.964 , 157.25 , 158.92535 , 162.500 , 164.93032 , 167.259 , 168.93421 , 173.054 , 174.9668 , .0 ],
197
+ [.0 , .0 , 227 , 232.03806 , 231.03588 , 238.02891 , 237 , 244 , 243 , 247 , 247 , 251 , 252 , 257 , 258 , 259 , 262 , .0 ],
198
+ [.0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 ],
199
+ [.0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 ],
200
+ [.0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 ]]
201
+
202
+ color = [[.8 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , 1 .],
203
+ [.1 , .2 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .7 , .8 , .8 , .8 , .9 , 1 .],
204
+ [.1 , .2 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .6 , .7 , .8 , .8 , .9 , 1 ],
205
+ [.1 , .2 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .6 , .7 , .8 , .8 , .9 , 1 .],
206
+ [.1 , .2 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .6 , .6 , .7 , .7 , .9 , 1 .],
207
+ [.1 , .2 , .4 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .6 , .6 , .6 , .7 , .9 , 1 .],
208
+ [.1 , .2 , .5 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .3 , .6 , .6 , .6 , .6 , .9 , 1 .],
209
+ [.0 , .0 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .4 , .0 ],
210
+ [.0 , .0 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .5 , .0 ],
211
+ [.0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 , .0 ],
212
+ [.1 , .1 , .1 , .3 , .3 , .3 , .5 , .5 , .5 , .7 , .7 , .7 , .9 , .9 , .9 , .0 , .0 , .0 ],
213
+ [.2 , .2 , .2 , .4 , .4 , .4 , .6 , .6 , .6 , .8 , .8 , .8 , 1 ., 1 ., 1 ., .0 , .0 , .0 ]]
214
+
215
+ # Set Colorscale
216
+ colorscale= [[0.0 , ' rgb(255,255,255)' ], [.2 , ' rgb(255, 255, 153)' ],
217
+ [.4 , ' rgb(153, 255, 204)' ], [.6 , ' rgb(179, 217, 255)' ],
218
+ [.8 , ' rgb(240, 179, 255)' ],[1.0 , ' rgb(255, 77, 148)' ]]
219
+
220
+ # Display element name and atomic mass on hover
221
+ hover= []
222
+ for x in range (len (symbol)):
223
+ hover.append([i + ' <br>' + ' Atomic Mass: ' + str (j)
224
+ for i, j in zip (element[x], atomic_mass[x])])
225
+
226
+ import plotly.figure_factory as ff
227
+ # Make Annotated Heatmap
228
+ fig = ff.create_annotated_heatmap(color[::- 1 ], annotation_text = symbol[::- 1 ], text = hover[::- 1 ],
229
+ colorscale = colorscale, font_colors = [' black' ], hoverinfo = ' text' )
230
+ fig.update_layout(title_text = ' Periodic Table' )
231
+ fig.show()
232
+ ```
233
+
234
+ Here is the same output using ` px.imshow() ` with much less array manipulation:
235
+
236
+ ``` python
237
+ import plotly.express as px
238
+ import numpy as np
239
+
240
+ fig = px.imshow(color, color_continuous_scale = colorscale, aspect = " auto" ,
241
+ title = ' Periodic Table' )
242
+ fig.update_traces(
243
+ text = symbol, texttemplate = " %{text} " , textfont_size = 12 ,
244
+ customdata = np.moveaxis([element, atomic_mass], 0 ,- 1 ),
245
+ hovertemplate = " %{customdata[0]} <br>Atomic Mass: %{customdata[1]:.2f } <extra></extra>"
246
+ )
247
+ fig.update_xaxes(visible = False )
248
+ fig.update_yaxes(visible = False )
249
+ fig.update_coloraxes(showscale = False )
250
+ fig.show()
251
+ ```
252
+
159
253
#### Reference
160
254
161
255
For more info on Plotly heatmaps, see: https://plotly.com/python/reference/heatmap/ .<br > For more info on using colorscales with Plotly see: https://plotly.com/python/heatmap-and-contour-colorscales/ <br >For more info on ` ff.create_annotated_heatmap() ` , see the [ full function reference] ( https://plotly.com/python-api-reference/generated/plotly.figure_factory.create_annotated_heatmap.html#plotly.figure_factory.create_annotated_heatmap )
0 commit comments