multi-level-bar-chart-array

Visualisierung multi-level bar chart array

Entwicklungsumgebung

Um dieses Projekt zu ändern oder weiterzuentwickeln, werden nodejs und npm benötigt. Die Abhängigkeiten werden wie üblich per npm install installiert.

Für die Entwicklung wurden Teile von ES6 verwendet und mit rollup, babel und postcss transpiliert. Als Build Management Tool werden einfache npm Scripts verwendet.

npm run watch beispielsweis startet den Entwicklungsserver, transformiert Javascript und CSS Dateien bei Änderungen für das Development Target und lädt die Visualisierung im Browser.

Die folgenden Scripts sind in package.json definiert und können entsprechend mit npm run … ausgeführt werden:

- prepare         Wird ausgeführt, nachdem `npm install` aufgerufen wurde. In diesem Schritt werden die statischen Abhängigkeiten erstellt.
- build           Generiert Javascript und CSS Dateien (einmalig) und kopiert alle generierten Dateien inklusive html-Dateien in das Verzeichnis `dist`.
- build:data      Transformiert die Rohdaten in eine JSON-Datei für die Visualisierung.
- build:html      Generiert HTML Dateien für Visualisierung und umgebenden Text.
- build:static    Generiert die von der Anwendung benötigten JSON- und HTML-Dateien.
- build:dev       Generiert Javascript und CSS Dateien für einen *Development Build*.
- build:prod      Generiert Javascript und CSS Dateien für einen *Production Build*.
- watch           Startet den Entwicklungsserver führt bei Änderungen einen Development Build durch.

In der Datei rollup.config.js werden die Konfigurationen für rollup und postcss dynamisch generiert. Für den Development Build werden SourceMaps erstellt, dagegen werden Javascript und CSS Dateien für den Production Build mit terser bzw. cssnano optimiert.

Die HTML-Dateien werden von einem nodejs Script für das entsprechende Target generiert (momentan kann man die Sinnhaftigkeit bezweifeln, nachdem nur die geladenen Resourcen verschieden benannt werden). Leider ist HTML5 mit dem Versuch gescheitert, HTML imports zu standardisieren. Als pragmatische Alternative, und um möglichst flexibel zu bleiben, wurde daher entschieden, die eigentliche Visualisierung per iframe in der umgebenden Webseite einzubetten.

Für einen vereinfachten Workflow wird hier der Rahmentext für diese Seite aus einem Markdown Dokument in HTML konvertiert. Der darin enthaltene iframe Tag wird dynamisch konfiguriert und das Ergebnis in einer HTML-Datei gespeichert.

Die Datei config.json enthält die Konfigurationen sowohl zum Generieren der HTML-Dateien als auch für die Erstellung der Javascript- und CSS-Dateien.

Nach dem Ausführen eines Builds sind alle Dateien, die für die Funktionalität der Website / Web App erforderlich sind im Verzeichnis dist zu finden:

├── index.html                            Diese HTML-Seite ist der Einstiegspunkt und wird vom Web-Server ausgeliefert
├── risk-ladder.html                      Die Visualisierung wird in einem iframe in der index.html eingebunden
├── css
│   ├── index.css                         Stylesheet für die umgebende Webseite
│   └── main[.min].css                    Stylesheet für die Visualisierung
├── data
│   ├── data_de.json                      Daten der Visualisierung (deutsch)
│   └── data_en.json                      Daten der Visualisierung (englisch)
├── fonts
│   ├── ASAP                              Fonts für die Visualisierung
│   ├── montserrat                        Font für Überschriften der umgebenden Seite (wird entfallen)
│   └── lora                              Font für den Fließtext der umgebenden Seite (wird entfallen)
├── img
│   ├── BMJV_Web_Master_de_WBZ.png        BMJV Logo
│   ├── HardingCenter_Logo_de_RGB.png     Harding Zentrum Logo
│   └── mpib.png                          Max-Planck Institut fuur Bildungsforschung Logo
└── js
    ├── main.min.js                       Javascript der Visualisierung
    ├── blob-stream.min.js                Wird von pdfkit benötigt
    └── pdfkit.min.js                     Fettleibige Bibliothek zum generieren von PDF Dateien im Browser  

Wird ein Webserver konfiguriert, dieses Verzeichnis auszuliefern, sollte die Visualisierung enstsprechend erreichbar und funktional sein.

Verzeichnisstruktur

├── README.md
├── assets
│   ├── css
│   │   └── index.css                               // Stildefinitionen der umgebenden HTML Seite
│   ├── fonts
│   │   ├── Asap-Bold.ttf
│   │   ├── Asap-Italic.ttf
│   │   ├── Asap-Regular.ttf
│   │   ├── AsapCondensed-Regular.ttf
│   │   ├── lora
│   │   │   ├── Lora-Regular.ttf
│   │   │   └── SIL\ Open\ Font\ License.txt
│   │   └── montserrat
│   │       ├── Montserrat-SemiBold.otf
│   │       └── SIL\ Open\ Font\ License.txt
│   ├── img                                         // Logos für die umgebende HTML Seite
│   │   ├── BMJV_Web_Master_de_WBZ.png
│   │   ├── HardingCenter_Logo_de_RGB.png
│   │   ├── jobloss.png
│   │   └── mpib.png
│   └── js                                          // Externe Javascript Bibliotheken
│       ├── blob-stream.min.js
│       ├── lunrjs
│       │   ├── lunr.de.js
│       │   ├── lunr.js
│       │   └── lunr.stemmer.support.js
│       └── pdfkit.min.js
├── bin
│   ├── prepareData.js                              // Generiert json Datei aus Rohdaten
│   └── preprocess.js                               // Generiert HTML Dateien für Visualisierung und umgebendes HTML
├── build.json                                      // Build Konfiguration
├── data                                            // Rohdaten
│   ├── jobloss_de.tsv
│   └── jobloss_en.tsv
├── package.json
├── rollup.config.js                                // Build Prozess
└── src
    ├── css
    │   └── main.css                                // Stildefinitionen für Visualisierung
    ├── html
    │   ├── markdown
    │   │   └── index.md                            // Markdown für Kontextinformationen des umgebenden HTML
    │   └── skeletons
    │       ├── main.html                           // Template für umgebendes HTML
    │       └── visualisation.html                  // Template für Visualisierung
    └── js
        ├── logos                                   // Definitionen der Logos als Javascript Objekte für Einbindung als Vektorgrafiken im PDF
        │   ├── BMJV_logo.js
        │   ├── RA_logo_1280.js
        │   └── hc_logo.js
        ├── config.json                             // Konfiguration der Visualisierung
        ├── d3-custom.js                            // Definition der verwendeten Module von d3
        ├── main.js                                 // Implementierung der Visualisierung
        ├── pdfExport.js                            // Generieren des PDF
        └── search.js                               // Implementierung der Suche

Wie ändere ich Inhalte und Daten?

Texte und Labels

Texte und Labels können in der Datei config.json geändert werden. Dort ist sowohl der Text des Eingabefeldes der Suche, als auch die Texte zu den Detailinformationen und des PDFs definiert.

Daten

Für diese Visualisierung sind die hierarchischen Rohdaten in der Datei data/jobloss_[de|en].tsv definiert. Bevor sie in der Visualisierung verwendet werden können, müssen sie in eine JSON Datei transformiert werden. Dies geschieht im Schrit build:data des Build Prozesses. Bei Beibehaltung der Struktur der Daten können diese so beliebig ausgetauscht werden. Alle Bezeichner der interaktiven Visualisierung werden aus diesen Daten gelesen.

Historisches

Ursprünglich wurde diese Visualisierung von Data Science & Stories entwickelt (inzwischen in einem Ressort des Tagesspiegel aufgegangen).