en:periodic-table

Book Creator
 Add this page to your book
Book Creator
 Remove this page from your book  

 Manage book(0 page(s))
 Help

Periodic table

<html> TODO: - print total number of PDB entries (footnote or next to Select elements…) - periodic table

  1. better (gradual) coloring of elements
  2. elements D and X

- examples:

  1. list of extra element in each example
  2. link titles with the PDB title

–> <html lang=en> <meta charset=UTF-8/> <meta name=viewport content=width=device-width, user-scalable=no> <meta name=theme-color content=#ee7711> <title>PDB search with periodic table</title> <script src=data.js></script> <style type=text/css> html { width: 100%; font-family: sans-serif; background-color: #fdfdfd; } @media (max-width: 600px) { html { width: 600px; } } @media (max-width: 800px) { body { margin: 0; } } h1 { font-size: 24px; text-align: center; color: #444; margin-bottom: -10px; } h2 { font-size: 16px; text-align: center; color: #444; margin-bottom: 2px; } h2 span { cursor: pointer; border-style: outset; color: #444; 

        border-width: 2px; padding: 2px; font-weight: normal; }

h2 span.on { border-style: inset; text-shadow: 1px 1px 0 #444; } #detour { font-size: 11px; line-height: 3; text-align: center; color: #333; } #footnote { font-size: 10px; text-align: center; color: #333; } #periodic { margin: 0 auto; border-spacing: 3px; } @media (min-width: 701px) and (max-width: 800px) 

{ #periodic { border-spacing: 2px; } }

@media (max-width: 700px) { #periodic { border-spacing: 1px; } } #periodic tr td { background-color: #f8f8f8; width: 32px; height: 32px; 

                cursor: pointer; border-style: outset; border-width: 3px; }

@media (max-width: 700px) { #periodic tr td { border-width: 2px; } } #periodic tr td.empty { background-color: transparent; cursor: auto; 

                      border: none; text-align: left; }

#periodic tr.spacer td { height: 10px; } #periodic tr td sup { font-size: 11px; display: block; text-align: center; } #periodic tr td { font-size: 15px; text-align: center; position: relative; } #periodic tr td.sel { border-style: inset; text-shadow: 1px 1px 1px #222; } #periodic tr td.sel sup::before { content: '\25CF'; color: #0f0; font-size: 8px; 

                                position: absolute; top: -1px; left: 1px; }

#desc { padding: 0 30px; color: #555; } #examples { margin: 0 auto; } #examples tr td { background-color: #fff; width: 167px; height: 167px; 

                font-size: 48px; color: #aaa; text-align: center;
                background-size: cover; background-repeat: no-repeat;
                background-position: center center; }

#examples tr td a { display: block; width: 100%; height: 100%; 

                  text-align: left; vertical-align: top;
                  font-size: 16px; color: #888; text-decoration: none; }

table.hide_optional tr.optional { display: none; } </style> <h1>Protein Data Bank entries by&nbsp;elements</h1> 

<tr id="p1">
 <td id="H" title="Hydrogen"><sup>1</sup>H</td>
 <td class="empty" colspan="16"></td>
 <td id="He" title="Helium"><sup>2</sup>He</td>
</tr>
<tr id="p2">
 <td id="Li" title="Lithium"><sup>3</sup>Li</td>
 <td id="Be" title="Beryllium"><sup>4</sup>Be</td>
 <td class="empty" id="desc" colspan="10" rowspan="2"></td>
 <td id="B" title="Boron"><sup>5</sup>B</td>
 <td id="C" title="Carbon"><sup>6</sup>C</td>
 <td id="N" title="Nitrogen"><sup>7</sup>N</td>
 <td id="O" title="Oxygen"><sup>8</sup>O</td>
 <td id="F" title="Fluorine"><sup>9</sup>F</td>
 <td id="Ne" title="Neon"><sup>10</sup>Ne</td>
</tr>
<tr id="p3">
 <td id="Na" title="Sodium"><sup>11</sup>Na</td>
 <td id="Mg" title="Magnesium"><sup>12</sup>Mg</td>
 <td id="Al" title="Aluminium"><sup>13</sup>Al</td>
 <td id="Si" title="Silicon"><sup>14</sup>Si</td>
 <td id="P"  title="Phosphorus"><sup>15</sup>P</td>
 <td id="S"  title="Sulfur"><sup>16</sup>S</td>
 <td id="Cl" title="Chlorine"><sup>17</sup>Cl</td>
 <td id="Ar" title="Argon"><sup>18</sup>Ar</td>
</tr>
<tr id="p4">
 <td id="K"  title="Potassium"><sup>19</sup>K</td>
 <td id="Ca" title="Calcium"><sup>20</sup>Ca</td>
 <td id="Sc" title="Scandium"><sup>21</sup>Sc</td>
 <td id="Ti" title="Titanium"><sup>22</sup>Ti</td>
 <td id="V"  title="Vanadium"><sup>23</sup>V</td>
 <td id="Cr" title="Chromium"><sup>24</sup>Cr</td>
 <td id="Mn" title="Manganese"><sup>25</sup>Mn</td>
 <td id="Fe" title="Iron"><sup>26</sup>Fe</td>
 <td id="Co" title="Cobalt"><sup>27</sup>Co</td>
 <td id="Ni" title="Nickel"><sup>28</sup>Ni</td>
 <td id="Cu" title="Copper"><sup>29</sup>Cu</td>
 <td id="Zn" title="Zinc"><sup>30</sup>Zn</td>
 <td id="Ga" title="Gallium"><sup>31</sup>Ga</td>
 <td id="Ge" title="Germanium"><sup>32</sup>Ge</td>
 <td id="As" title="Arsenic"><sup>33</sup>As</td>
 <td id="Se" title="Selenium"><sup>34</sup>Se</td>
 <td id="Br" title="Bromine"><sup>35</sup>Br</td>
 <td id="Kr" title="Krypton"><sup>36</sup>Kr</td>
</tr>
<tr id="p5">
 <td id="Rb" title="Rubidium"><sup>37</sup>Rb</td>
 <td id="Sr" title="Strontium"><sup>38</sup>Sr</td>
 <td id="Y"  title="Yttrium"><sup>39</sup>Y</td>
 <td id="Zr" title="Zirconium"><sup>40</sup>Zr</td>
 <td id="Nb" title="Niobium"><sup>41</sup>Nb</td>
 <td id="Mo" title="Molybdenum"><sup>42</sup>Mo</td>
 <td id="Tc" title="Technetium"><sup>43</sup>Tc</td>
 <td id="Ru" title="Ruthenium"><sup>44</sup>Ru</td>
 <td id="Rh" title="Rhodium"><sup>45</sup>Rh</td>
 <td id="Pd" title="Palladium"><sup>46</sup>Pd</td>
 <td id="Ag" title="Silver"><sup>47</sup>Ag</td>
 <td id="Cd" title="Cadmium"><sup>48</sup>Cd</td>
 <td id="In" title="Indium"><sup>49</sup>In</td>
 <td id="Sn" title="Tin"><sup>50</sup>Sn</td>
 <td id="Sb" title="Antimony"><sup>51</sup>Sb</td>
 <td id="Te" title="Tellurium"><sup>52</sup>Te</td>
 <td id="I"  title="Iodine"><sup>53</sup>I</td>
 <td id="Xe" title="Xenon"><sup>54</sup>Xe</td>
</tr>
<tr id="p6">
 <td id="Cs" title="Caesium"><sup>55</sup>Cs</td>
 <td id="Ba" title="Barium"><sup>56</sup>Ba</td>
 <td class="empty"></td>
 <td id="Hf" title="Hafnium"><sup>72</sup>Hf</td>
 <td id="Ta" title="Tantalum"><sup>73</sup>Ta</td>
 <td id="W"  title="Tungsten"><sup>74</sup>W</td>
 <td id="Re" title="Rhenium"><sup>75</sup>Re</td>
 <td id="Os" title="Osmium"><sup>76</sup>Os</td>
 <td id="Ir" title="Iridium"><sup>77</sup>Ir</td>
 <td id="Pt" title="Platinum"><sup>78</sup>Pt</td>
 <td id="Au" title="Gold"><sup>79</sup>Au</td>
 <td id="Hg" title="Mercury"><sup>80</sup>Hg</td>
 <td id="Tl" title="Thallium"><sup>81</sup>Tl</td>
 <td id="Pb" title="Lead"><sup>82</sup>Pb</td>
 <td id="Bi" title="Bismuth"><sup>83</sup>Bi</td>
 <td id="Po" title="Polonium"><sup>84</sup>Po</td>
 <td id="At" title="Astatine"><sup>85</sup>At</td>
 <td id="Rn" title="Radon"><sup>86</sup>Rn</td>
</tr>
<tr id="p7">
 <td id="Fr" title="Francium"><sup>87</sup>Fr</td>
 <td id="Ra" title="Radium"><sup>88</sup>Ra</td>
 <td class="empty"></td>
 <td id="Rf" title="Rutherfordium"><sup>104</sup>Rf</td>
 <td id="Db" title="Dubnium"><sup>105</sup>Db</td>
 <td id="Sg" title="Seaborgium"><sup>106</sup>Sg</td>
 <td id="Bh" title="Bohrium"><sup>107</sup>Bh</td>
 <td id="Hs" title="Hassium"><sup>108</sup>Hs</td>
 <td id="Mt" title="Meitnerium"><sup>109</sup>Mt</td>
 <td id="Ds" title="Darmstadtium"><sup>110</sup>Ds</td>
 <td id="Rg" title="Roentgenium"><sup>111</sup>Rg</td>
 <td id="Cn" title="Copernicium"><sup>112</sup>Cn</td>
 <td id="Nh" title="Nihonium"><sup>113</sup>Nh</td>
 <td id="Fl" title="Flerovium"><sup>114</sup>Fl</td>
 <td id="Mc" title="Moscovium"><sup>115</sup>Mc</td>
 <td id="Lv" title="Livermorium"><sup>116</sup>Lv</td>
 <td id="Ts" title="Tennessine"><sup>117</sup>Ts</td>
 <td id="Og" title="Oganesson"><sup>118</sup>Og</td>
</tr>
<tr class="spacer"><td class="empty" colspan=18></td></tr>
<tr>
 <td class="empty" colspan="2"></td>
 <td id="La" title="Lanthanum"><sup>57</sup>La</td>
 <td id="Ce" title="Cerium"><sup>58</sup>Ce</td>
 <td id="Pr" title="Praseodymium"><sup>59</sup>Pr</td>
 <td id="Nd" title="Neodymium"><sup>60</sup>Nd</td>
 <td id="Pm" title="Promethium"><sup>61</sup>Pm</td>
 <td id="Sm" title="Samarium"><sup>62</sup>Sm</td>
 <td id="Eu" title="Europium"><sup>63</sup>Eu</td>
 <td id="Gd" title="Gadolinium"><sup>64</sup>Gd</td>
 <td id="Tb" title="Terbium"><sup>65</sup>Tb</td>
 <td id="Dy" title="Dysprosium"><sup>66</sup>Dy</td>
 <td id="Ho" title="Holmium"><sup>67</sup>Ho</td>
 <td id="Er" title="Erbium"><sup>68</sup>Er</td>
 <td id="Tm" title="Thulium"><sup>69</sup>Tm</td>
 <td id="Yb" title="Ytterbium"><sup>70</sup>Yb</td>
 <td id="Lu" title="Lutetium"><sup>71</sup>Lu</td>
 <td class="empty"></td>
</tr>
<tr>
 <td class="empty" colspan="2"></td>
 <td id="Ac" title="Actinium"><sup>89</sup>Ac</td>
 <td id="Th" title="Thorium"><sup>90</sup>Th</td>
 <td id="Pa" title="Protactinium"><sup>91</sup>Pa</td>
 <td id="U"  title="Uranium"><sup>92</sup>U</td>
 <td id="Np" title="Neptunium"><sup>93</sup>Np</td>
 <td id="Pu" title="Plutonium"><sup>94</sup>Pu</td>
 <td id="Am" title="Americium"><sup>95</sup>Am</td>
 <td id="Cm" title="Curium"><sup>96</sup>Cm</td>
 <td id="Bk" title="Berkelium"><sup>97</sup>Bk</td>
 <td id="Cf" title="Californium"><sup>98</sup>Cf</td>
 <td id="Es" title="Einsteinium"><sup>99</sup>Es</td>
 <td id="Fm" title="Fermium"><sup>100</sup>Fm</td>
 <td id="Md" title="Mendelevium"><sup>101</sup>Md</td>
 <td id="No" title="Nobelium"><sup>102</sup>No</td>
 <td id="Lr" title="Lawrencium"><sup>103</sup>Lr</td>
 <td class="empty"></td>
</tr>

<h2> 

<span id="show5" class="on">5</span>
<span id="show15">15</span>
examples
<span id="showPics" class="on">with pics</span>

</h2>

<tr>
<td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td>

</tr><tr class=optional> 

<td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td>

</tr><tr class=optional> 

<td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td><td>&#xD7;</td>

</tr> 

   See other <a href="https://project-gemmi.github.io/pdb-stats/">GEMMI visualizations</a>.
 &copy; 2017 Global Phasing Ltd. License: MPL 2.0.
 Images are from RCSB.
 Last update: 2017-12-01, 135519 PDB entries.
 <a href="https://github.com/project-gemmi/periodic-table">Source code & info...</a>

<script>

global data defined in data.js var elem_count; a list of 118+2 numbers var ids_by_elems; {C_N_O_S_Zn: [n, '1pdb', '2pdb', …]}, length >2500 window.onload = (function () { 'use strict'; other globals var desc; var example_tds; var show_pics = true; var show15 = false; var state = []; 1-based for (var i_ = 0; i_ < 118+2; i_++) state.push(false); var elements = ['H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne', 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', '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', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og', 'D', 'X']; var PDB_LINK = 'https://www.ebi.ac.uk/pdbe/entry/pdb/'; var PDB_LINK = 'https://www.rcsb.org/pdb/explore/explore.do?structureId='; function image_link(pdb_id) { 

return 'https://www.rcsb.org/pdb/images/' + pdb_id + '_bio_r_250.jpg';

}

function contains(key, names) { 

for (var i = 0; i < names.length; i++) {
  if (key.indexOf(names[i]) === -1) return false;
}
return true;

}

function toggle_elem(td) { 

var n = elements.indexOf(td.id);
var sel = state[n];
state[n] = !sel;
td.className = sel ? '' : 'sel';
update();

};

function update() { 

var NE = 15; // number of examples
var names = [];
var padded_names = [];
var indices = [];
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  if (state[i]) {
    names.push(element);
    indices.push(i);
    padded_names.push(element.length == 1 ? element + '_' : element);
  }
}
var exact_key = padded_names.join('');
if (names.length === 0) {
  desc.innerHTML = 'Select elements...';
  for (var i = 0; i < example_tds.length; i++) {
    setup_example(example_tds[i], null);
  }
  return;
}
var exact_match = ids_by_elems[exact_key];
var only_count = exact_match ? exact_match[0] : 0;
var example_codes = only_count > 0 ? exact_match.slice(1) : [];
var incl_count = 0;
for (var k in ids_by_elems) {
  if (contains(k, padded_names)) {
    incl_count += ids_by_elems[k][0];
    if (example_codes.length < NE && k !== exact_key) {
      Array.prototype.push.apply(example_codes,
                                 ids_by_elems[k].slice(1, NE+1));
    }
  }
}
desc.innerHTML = 'selected: ' + names.join(', ') +
  '<br/>entries with it: ' + incl_count +
  '<br/>entries with only it: ' + only_count;
for (var i = 0; i < example_tds.length; i++) {
  setup_example(example_tds[i], example_codes[i]);
}

}

function setup_example(td, code) { 

if (code != null) {
  td.innerHTML = '<a href="' + PDB_LINK + code + '">' + code + '</a>';
  td.style.backgroundImage = show_pics ? 'url(' + image_link(code) + ')' : '';
} else {
  td.innerHTML = '&#xD7;';
  td.style.backgroundImage = '';
}

}

function color_for_count(cnt) { 

if (cnt < 1) return '#f8f8f8';
if (cnt < 10) return '#fdfde4';
if (cnt < 25) return '#fdfdd0';
if (cnt < 100) return '#fdfdbb';
if (cnt < 250) return '#fff8a0';
if (cnt < 1000) return '#fe8';
if (cnt < 5000) return '#fc5';
if (cnt < 10000) return '#f93';
if (cnt < 30000) return '#e71';
if (cnt < 100000) return '#d61';
return '#c41';

}

function init_cell(cell) { 

cell.onclick = function () { toggle_elem(cell); };
var cnt = elem_count[elements.indexOf(cell.id)];
cell.style.backgroundColor = color_for_count(cnt);

}

function update_5_15() { 

document.getElementById('show5').className = show15 ? '' : 'on';
document.getElementById('show15').className = show15 ? 'on' : '';
document.getElementById('examples').className = show15 ? '' : 'hide_optional';

}

return function () { initialization desc = document.getElementById('desc'); desc.innerHTML = 'Select elements…'; example_tds = document.getElementById('examples').getElementsByTagName('td'); var cells = document.getElementById('periodic').getElementsByTagName('td'); for (var i = 0; i < cells.length; i++) { if (cells[i].className !== 'empty') init_cell(cells[i]); } document.getElementById('show5').onclick = function () { show15 = false; update_5_15(); } document.getElementById('show15').onclick = function () { show15 = true; update_5_15(); } document.getElementById('showPics').onclick = function () { show_pics = !show_pics; document.getElementById('showPics').className = show_pics ? 'on' : ''; update(); } }; })(); </script> </html>

Discussion

Enter your comment. Wiki syntax is allowed:
 
Detach Close

This topic does not exist yet

You've followed a link to a topic that doesn't exist yet. If permissions allow, you may create it by clicking on Create this page.

  • en/periodic-table.txt
  • 2021/09/17 06:38
  • brahmantra