app.net

Diese interaktive Datengrafik aus dem Fach “Programmiertes Entwerfen 2” beschäftigt sich mit einem Datensatz von kaggle.de, welcher verschiedenste Parameter zu 10.000 Apps aus dem AppStore beinhaltet.
Mit Hilfe von JavaScript und python wurden die Daten bereinigt und schlussendich visualisiert.
Dabei war zu beachten, keinerlei beschreibende Wörter sowie Symbole zu verwenden. Jedes erzeugte Objekt, sollte durch Daten entstehen und codiert werden.

Auf dem Hauptscreen ist ein Netzdiagramm zu sehen, welches auf den 8 Achsen folgende verschiedenen Parameter repräsentiert:

• Sternerating
• Reviews
• Age of targetgroup
• Installs
• App size
• Apps per TopLevel
• Categories per TopLevel
• Price

Die fünf, farblich unterschiedlich codierten, Netze stehen für die Übergruppen (TopLevel) der Apps. Die aus dem Datensatz entnehmbaren 33 Kategorien wurden in diesen 5 Übergruppen weiter zusammengefasst. Von Lifestyle, über Social bis ToolsAndHandy, wurden alle TopLevels sorgsam angelegt.

Nun können nach Blelieben Netze selektiert und deselektiert werden – genauso auch die Achsen. Sobald minimum ein Netz und eine Achse gewählt wurden, erscheint eine weitere Ansicht rechts neben dem Netzdiagramm. Die nun sichtbaren Kreise sind farblich passend zu dem TopLevel codiert, und repräsentieren die Kategorien, welche in der jeweiligen Übergruppe enthalten sind. Die Größe des Kreises verrät die Anzahl der Apps der jeweiligen Kategorie.
Angeordnet werden die Kategorienkreise abhängig von den gewählten Achsen. Wird nur eine Achse gewählt, so erscheint eine lineare Darstellung. Wird eine zweite Achse dazu gewählt, fächert sich die noch lineare Darstellung zu einen Scatterplot auf. Die Achsenerstwahl repräsentiert immer die x-Achse und die Zweitwahl immer die y-Achse.
Dank des Autodeselects können beliebig Achsen gewählt werden, um zwischen Ansichten zu wechseln.
Zusätzlich können beliebig viele Netze selektiert und deselektiert werden.
Die gesamte Auswahl zurückzusetzen kann erreicht werden, indem außerhalb des Netzdiagramms, aber im linken Drittel des Screens, auf den schwarzen Hintergrund geklickt wird.

Falls tiefer in die Materie eingestiegen werden möchte, so können nun die Kategoriekreise auf der rechten Seite angewählt werden. Minimum zwei, bis maximal 10 Kreise können gewählt werden, bis die automatische Deselektion eingreift. Mit der momentanen Auswahl zufrieden? – Nun kann durch Scrollen nach unten ein weiterer Screen aufgerufen werden. Die dort sichtbaren Balkendiagramme bringen weitere Detailinformationen zu den gewählten Kategoriekreisen.
Von unten nach oben stehen die Balken für das Sternerating. Von Unrated, über Null bis 5 Sterne, werden im 0.5-Schritt weitere Informationen dargestellt. Die Länge der rechten Balken stehen für die Anzahl der Apps. Dieser Balken ist durch verschieden farbige Balken entstanden. Diese stehen für die jeweiligen Altersgruppen. Je näher an der Mittelachse, oder je dunkler das rot, desto eingeschränkter ist die Zielgruppe.
Die grünen Balken auf der Linken Seite repräsentieren die durchschnittliche Anzahl der Installationen je App.

Durch Scrollen nach oben kann auf den Hauptscreen zurückgekehrt, und Änderungen an der Auswahl vorgenommen werden.

Viel Spaß mit dem Prototypen :)
(am rechten Rand zu finden)