@@ -156,6 +156,100 @@ fig = px.imshow(z, text_auto=".2f", color_continuous_scale='Greys', aspect="auto
156156fig.show()
157157```
158158
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+
159253#### Reference
160254
161255For 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