Datenvisualisierung/Baumdiagramm

30min

einfach

• HTML
• SVG
• JavaScript

Ein Baumdiagramm (auch: Verzweigungsdiagramm) ist eine graphische Darstellung, welche die Beziehungen zwischen einzelnen Elementen eines Netzwerkes zueinander (also ihre Verwandtschaft oder hierarchische Abhängigkeiten) durch Verbindungslinien darstellt. Der Name leitet sich aus der verästelten Struktur dieser Darstellungen ab.

Dieses Tutorial zeigt einmal, wie man ein Organigramm mit 4 Hierarchieebenen nur in HTML realisiert. In einem zweiten Beispiel wird die Grafik „umgedreht“ und zu einem Stammbaum erweitert, bei dem auch weitere Verknüpfungen möglich sind.

Organigramm

Das Organigramm (Kofferwort aus Organisation und Diagramm) ist eine grafische Darstellung der Aufbauorganisation einer Organisation, welche deren organisatorische Einheiten, Aufgabenverteilung (bzw. Hierarchieebenen) und Kommunikationsbeziehungen offenlegt. Damit werden die Leitungsbeziehungen zwischen den einzelnen Organisationseinheiten in übersichtlicher Form abgebildet.

HTML

Auf tutsplus.com findet sich ein Tutorial, das ein solches Organigramm nur mit HTML und CSS realisiert. Wir nehmen es als Grundlage und optimieren es.

<ol class="level-1 wrapper">
  <li><div class="card">CEO</div>
  <ol class="level-2 wrapper">
    <li><div class="card">Direktor A</div>
      <ol class="level-3 wrapper">
        <li><div class="card">Manager A</div>
          <ol class="level-4 wrapper">
            <li><div class="card">Person A</div></li>
            <li><div class="card">Person B</div></li>
            <li><div class="card">Person C</div></li>
            <li><div class="card">Person D</div></li>
          </ol>
        </li>
      </ol>
    </li>
   </ol>

Die Hierarchie wird über mehrere verschachtelte Listen hergestellt. In jedem Listenelement li findet sich eine .card und optional eine weitere ol mit einer weiteren Hierarchiestufe (.level-n).

Um nicht immer die Anzahl der Elternelemente überprüfen zu müssen (ol > ol > ol >.card) erhalten die ol eine Klasse mit ihrem „level“. Das tutsplus-Tutorial verwendete in jeder Ebene entsprechende Überschriften von h1 bis h4.

Gestaltung mit CSS

Eigentlich ist die Gestaltung einfach:

Die oberste Ebene - bestehend aus dem CEO - ist mittig zentriert. Weitere Ebenen verzweigen sich immer weiter, bis die letzte Ebene mangels Platz im Desktop-Viewport oder auf dem A3-Blatt untereinander dargestellt wird. Bisher waren dafür für jede Ebene eigene CSS-Deklarationen und für ein responsives Layout mehrere media queries notwendig.

Mit Container Queries können wir das vereinfachen: Wenn der verfügbare Platz innerhalb des Containers groß genug ist, können die Cards neben-, ansonsten untereinander angeordnet werden.

Baumdiagramm - verschachtelte Listen ansehen …

Verbindungen

Obwohl eine Umsetzung in HTML mit Pseudoelementen für die Verbindungslinien möglich ist, können Sie mit SVG sowohl die Elemente als auch die Verbindungen frei gestalten.

Werkzeuge

• https://stackoverflow.com/questions/2769315/where-can-i-find-a-web-based-interactive-org-chart-api

Generatoren

• Jim Blackler A tree diagram (SVG) generation tool in JavaScript
• RobinL / d3_orgchart_yammer (github)
  • interaktive Demo

Stammbaum

Fast jede größere Genealogie-Website verfügt über eine ständig wachsende Sammlung von Online-Stammbäumen, und viele andere Websites dienen in erster Linie dem Hosting, der Suche und der Verknüpfung von Stammbaumdateien. Das Hinzufügen eigener Stammbäume ist eine großartige Möglichkeit, mit Cousins und Cousinen und anderen Forschern in Kontakt zu treten,

Aber einen Stammbaum auf einer fremden Genealogie-Website zu erstellen oder hochzuladen ist, als würde man eine Wohnung mieten, anstatt ein Haus zu besitzen. Wenn es Ihnen wie mir geht, möchten Sie letztendlich mehr Kontrolle über die Umgebung Ihres Stammbaums haben.

https://softwarerecs.stackexchange.com/questions/20879/whats-the-best-htmlsvgcss-based-approach-for-displaying-a-family-tree-structu empfiehlt:

http://parallax-viewpoint.blogspot.com/2021/03/svg-family-tree-generator-v60.html

https://stackoverflow.com/questions/53151296/family-tree-with-pure-html-and-css-or-with-minimal-js

https://tessisamess.insanejournal.com/91881.html

Assoziogramm

Ein Assoziogramm (auch mindmap) ist eine visualisierte Sammlung von Wörtern, die dem Ersteller zu einem zentralen Begriff einfallen.

Weblinks

• pixelingene: Building a tree diagram in D3.js
• d3noob: Tree diagrams in d3.js
• recordssoundthesame: Mindmapping with Javascript