Finaler Prototyp

Der JavaScript-Code visualisiert Länderdaten durch Diagramme. Es gibt Variablen für Bühne und Dimensionen sowie Arrays für Kontinente und Eigenschaften. Farben für Kontinente und Eigenschaften werden definiert, und Eigenschaften in Gruppen kategorisiert. Beim Laden des Dokuments initialisiert jQuery Event-Handler, die Benutzerinteraktionen wie Sortieren und Filtern der Daten verarbeiten. Funktionen wie drawRankChart() und drawPropertyCharts() erzeugen Diagramme zur Datenvisualisierung, basierend auf aktuellen Daten. Interaktive Funktionen wie filterContinent() und sortByProperty() ermöglichen das Filtern und Sortieren der Daten. Die Funktionen nutzen Parameter zur dynamischen Anpassung der Visualisierungen.

Style Guide für die Farben der ersten Ansicht der Datenvisualisierung des Fragile State Index. Jede Farbfamilie ist einem Kriterium zugeordnet:

• Kohäsion: #00009F, #3265CB, #99CCFF. Die Wahl von Blautönen repräsentiert Ruhe und Stabilität, was für kohäsive Elemente geeignet ist.
• Wirtschaft: #CC6600, #FE9800, #FFCC66. Orangetöne symbolisieren Energie und Wachstum, passend zur wirtschaftlichen Dynamik.
• Politik: #009999, #33CCCC, #99FECC. Grüntöne stehen für Erneuerung und Ausgleich, was politische Aspekte gut widerspiegelt.
• Sozial: #800080, #CC0099, #E365E6. Lilatöne repräsentieren Kreativität und Vielfalt, passend für soziale Aspekte.

Diese Farben bieten eine klare visuelle Unterscheidung und erleichtern die Zuordnung der Kriterien im Fragile State Index

Farbauswahl für die Kontinente:

• Asien: #BC04BF
• Amerika: #F2CB05
• Europa: #CC6600
• Afrika: #16F28B
• Ozeanien: #F21616

Bei der Farbwahl war es wichtig, dass die Kontinente nicht anhand einer spezifischen Farbfamilie identifizierbar sind, um eine unvoreingenommene Darstellung zu gewährleisten​

• Die primäre Schriftart ist Helvetica, die für ihre klare Lesbarkeit und moderne Ästhetik bekannt ist.
• Interaktive Button-Zustände, wobei nur weiße Buttons verwendet werden, um die Visualisierung nicht abzulenken.