[OC] Da ich schon als Kind von dem Periodensystem der Elemente besessen war, habe ich eine interaktive Webversion erstellt

Ich weiß nicht, was es damit auf sich hat, ich habe einfach schon immer die Datendichte und die Beziehung zu alltäglichen Dingen, mit denen wir interagieren, und die Möglichkeit zur Visualisierung mithilfe verschiedener Technologien geliebt.

In diesem Fall verwende ich Angular zur Visualisierung, begleitet von Google Material für das CSS-Framework.

Ich erstelle diese Tabelle regelmäßig (heh) alle paar Jahre neu, um meine Front-End-Kenntnisse auf dem neuesten Stand zu halten.

EDIT: Eines der Dinge, die ich nie wirklich herausfinden konnte, ist der mobile Zusammenbruch … Ich habe einige Ideen, aber ich habe es nie elegant umgesetzt. Daher lässt sich diese Visualisierung am besten auf Desktop-Displays betrachten.

Quelle:
https://www.allthethings.dev/tools/scientific/periodic-table-of-elements

Dynamische Farben

– Kategorie (Alkalimetalle, Übergangsmetalle, Halogene usw.)
– Standardzustand (fest, flüssig, gasförmig)
– Elektronenblock (s, p, d, f)
– Atommasse, Elektronegativität, Atomradius
– Ionisierungsenergie, Elektronenaffinität
– Schmelzpunkt, Siedepunkt, Dichte
– Jahr entdeckt
– Die Farblegende wird automatisch aktualisiert und zeigt Verlaufsskalen für kontinuierliche Metriken an
– Glatte Hintergrundverläufe auf jeder Elementkachel

Such- und Filtersystem

– Echtzeitsuche nach Elementname, Symbol oder Ordnungszahl (aus Leistungsgründen entprellt)
– Mehrfachauswahlfilter nach chemischer Kategorie
– Mehrfachauswahlfilter nach Standardstatus
– Gefilterte Elemente werden ausgeblendet, wobei die Tabellenstruktur erhalten bleibt
– Schnell-Reset-Taste, wenn Filter aktiv sind

Umfassende Elementdetails

– Klicken Sie auf ein beliebiges Element, um detaillierte Eigenschaften anzuzeigen
– Grundlegend: Ordnungszahl, Symbol, Masse, Kategorie, Zustand, Block, Gruppe, Periode
– Elektronisch: Elektronenkonfiguration, Elektronegativität, Atomradius, Ionisierungsenergie, Elektronenaffinität, Oxidationsstufen
– Physikalisch: Dichte, Schmelzpunkt, Siedepunkt (mit Einheiten)
– Entdeckung: Jahr der Entdeckung und des Entdeckers
– Desktop: Seitenteil, das von rechts eingeschoben werden kann
– Mobil: Unteres Blatt mit Wischen zum Schließen

Vollbild-Erweiterungsmodus

– Mit einem Klick zum Vollbild-Ansichtsfenster erweitern
– Blendet die Seitennavigation und die Schaltfläche „Zurück nach oben“ automatisch aus
– Stellt beim Beenden den vorherigen Zustand wieder her
– ESC-Tastenunterstützung zum schnellen Beenden
– Elementdetails funktionieren im Erweiterungsmodus nahtlos
– Tooltip zur Schaltfläche „Erweitern“.