Der Kurs Programming Design 2 vermittelt die Grundlagen der Datenvisualisierung mit Schwerpunkt auf der Beziehung zwischen Form, Farbe und Daten. Die Studierenden haben die Aufgabe, eine Datenvisualisierung mit einem ausgewählten Datensatz unter Verwendung von JavaScript, jQuery und der Gmynd-Bibliothek zu programmieren. Der Kurs betont die Bedeutung der Darstellung, da unterschiedliche Darstellungen zu unterschiedlichen Interpretationen der Daten führen und die Verständlichkeit der Inhalte und Beziehungen in den Daten beeinflussen können. Ziel des Kurses ist es, die Beziehungen in einem größeren Datensatz durch abstrakte Visualisierung mit visuellen Elementen wie Form, Farbe und Sortierung effektiv darzustellen.

Datensatz und Kontext

Meine Leidenschaft für Sprachen inspirierte mich zu diesem Projekt, und ich wollte unbedingt einen Datensatz finden, der mir helfen würde, ein tieferes Verständnis für eine dieser Sprachen zu erlangen. Schließlich war ich bei meiner Suche erfolgreich und fand einen Datensatz mit den am häufigsten verwendeten chinesischen Symbolen, den ich für meine Arbeit verwendete.

Hier sind einige Begriffe, die für die Organisation des Unternehmens von zentraler Bedeutung waren und eng mit Mandarin-Chinesisch verbunden sind.

Pinyin, ein System zur Transkription chinesischer Schriftzeichen in das lateinische Alphabet, umfasst auch die Darstellung von Tönen, was im Chinesischen von entscheidender Bedeutung ist, da ein und dasselbe Wort je nach dem verwendeten Ton unterschiedliche Bedeutungen haben kann. Dies macht Pinyin zu einem nützlichen Werkzeug für Nicht-Muttersprachler, um Chinesisch zu lernen und richtig zu sprechen.

Bihua bezieht sich auf die Anzahl der Pinselstriche, mit denen ein chinesisches Zeichen geschrieben wird, und wird oft als weitere Methode zur Organisation und Klassifizierung der Zeichen verwendet.

Bushou, was so viel wie “Radikal” oder “Wurzel” bedeutet, wird verwendet, um die Zeichen anhand ihrer strukturellen Komponenten zu kategorisieren.

Bei den HSK-Level handelt es sich um einen standardisierten Test, mit dem die Fähigkeit von Nicht-Muttersprachlern, die Sprache in realen Situationen anzuwenden, bewertet wird, ähnlich wie bei der a1-c2-Skala für Deutsch oder Englisch.

Mit diesem Konzept im Hinterkopf entschied ich, welche Spalten ich für die Darstellung meiner Daten verwenden wollte. Und ich fügte eine weitere Spalte hinzu, die ich aus den Radikalcodes Dezimalzahlen entnommen habe und die darstellt, wie viele Bihua zu einem Bushou addiert werden, um das Zeichen zu erzeugen.

Konzepten

Ich glaubte, dass das Verständnis der Verbindung zwischen den beiden Formen der Sprache ein tieferes Verständnis der Sprache selbst und ihrer Komplexität ermöglichen würde. Ich wollte diese Beziehung durch eine visuelle Darstellung der ansteigenden Schwierigkeitsstufen aufzeigen und verdeutlichen, wie die Komplexität der geschriebenen Zeichen mit dem Fortschreiten durch die verschiedenen HSK-Stufen zunimmt und wie sich dies auf die gesprochene Sprache überträgt.

Meine ersten beiden Ideen habe ich verworfen, weil ich nicht genug Platz hatte, um alle Kategorien gleichzeitig auf dem Bildschirm anzuzeigen. Dann habe ich mich für ein mehrstufiges Raster entschieden, bei dem die Blöcke die HKS-Levels darstellen (von links nach rechts aufsteigend). Die horizontalen Untergruppen stehen für die schriftliche Komplexität, die sich aus der Anzahl der Bihua ergibt, die einem Bushou hinzugefügt werden, und die Farben stehen für die gesprochenen Töne.

Varianten

Also begann ich zunächst mit der Programmierung in P5JS. Am Anfang dachte ich, es könnte möglich sein, alle Zeichen auf dem Bildschirm anzuzeigen.

Nachdem ich merkte, wie unübersichtlich das war, beschloss ich, sie in Punkte zu verwandeln, die übereinander liegen.

Dann wechselte ich zu JS und JQuery und fing wieder von vorne an.

Ich ersetzte die Punkte durch Quadrate, weil die chinesischen Schriftzeichen in ein quadratisches Raster passen, und ich dachte, diese Form sei besser.

Dann bemerkte ich, dass die Farben zwar schön waren, aber nicht das Beste für das Thema, also versuchte ich es mit Paletten.

Ich habe 2 Buttons gebaut, mit denen man die Ansicht wechseln und den gesamten Ton oder Bihua vs. tatsächliche Strichzahl vergleichen kann. Außerdem habe ich beschlossen, dass ich einen bestimmten Punkt genauer anzeigen möchte, also habe ich es so gemacht, dass der Benutzer beim Anklicken die Besonderheiten des Punktes sehen kann.

Endergebnis