by @MaximeEuziere, @innovati and @subzey

JS1K 2017 ENTRY: PERIOD1K RELOADED

(Full rewrite, HTML + ES6, no canvas, no JS packing. It's centered, responsive and with even more information!)

• Commented source: http://codegolf.github.io/period1k/golfed.commented.html
• Minified and packed (1024b JS): http://codegolf.github.io/period1k/js1k17.html

NB: This demo generates about 26kb of HTML code!

---

JS1K 2016 ENTRY: PERIOD1K

(updated in june 2016 with the names of the four last elements)

JS1k submission:

• Commented source: http://codegolf.github.io/period1k/final.html
• Minified (1764b JS): http://codegolf.github.io/period1k/final.min.html
• Minified and packed (1020b JS): http://codegolf.github.io/period1k/final.min.pack.html

Wallpaper:

• 4000x3000 (0.3Mb, PNG): http://codegolf.github.io/period1k/wallpaper.png

---

Legend

    :        : 
    : group  :
 ...:________:
    |        |
 p  |  1  G -|--> state at room temperature (Gas / Liquid / Solid)
 e  |  ^-----|--> atomic number (Z)
 r  |   H ---|--> name
 i  |        |  
 o  |  1.00 -|--> atomic mass + stability (* = has no stable isotope)
 d  |       -|--> type: green = noble gas
 ...|________|          yellow-green = halogen
                        dark purple = metalloid
                        dark blue = poor metal
                        blue = transition metal
                        pale green = lanthanoid
                        pale blue = actinoid
                        brown = alkaline earth metal
                        red = alkali metal
                        purple = non-metal