Blog

Vor 10 Jahren waren Word Clouds sehr hip. Aber es gab und gibt auch viele kritische Stimmen dazu. Eingesetzt werden sie immer noch in vielen Bereichen. Im täglichen Einsatz im Büro aber sind sie mir bisher noch nicht aufgefallen. Das ist schade, denn in bestimmten Bereichen können sie hilfreich sein.

Word Clouds im Büro-Alltag

Word Clouds sind meiner Meinung nach nicht überall einsetzbar. Durch sie lernen die Betrachter nichts und bekommen auch keine weiteren Informationen. Word Clouds erklären keine Zusammenhänge. Deswegen würde ich den Anwendungsbereich im Büro sehr einschränken.

Word Clouds sagen nur etwas über die Häufigkeit von Wörtern oder Phrasen aus. Das lässt sich nutzen, um den Fokus der Leser oder Zuschauer auf Schlüsselworte zu lenken.

• Als Teaser
• Zur Reflexion
• Für Visualisierung
• Als Diagramm Alternative

Teaser

An Stellen, wo Informationen später erklärt werden, können Word Clouds Lust auf mehr machen. Im Büro-Alltag sind daher mögliche Einsatzorte z. B. die Einleitung für Präsentationen, Projekt-Berichte oder die Übersicht zu einem Projekt-Bericht.

Je nach Art und Umfang eines Dokuments ist eine Word Cloud über den gesamten Bereich oder für einzelne Kapitel passend.

Ähnlich findet man das bei Google Books. Unter „Häufige Begriffe und Wortgruppen“ stellt Google eine Word Cloud zum ausgewählten Buch als alphabetisch geordnete Schlagwörter oder kurze Phrasen dar.

Setzt man das für ein Besprechungsprotokoll um, würden am Beginn des Protokolls die Schlagworte des folgenden Detail-Protokolls stehen. Reine automatisch erzeugte Schlagworte empfinde ich hier aber als unpassend. Klarer für den Leser wird es, wenn sie um kurze Phrasen ergänzt werden.

Ganz nach Wolf Schneider gilt:

Einer muß sich plagen, der Schreiber oder der Leser.

Wolf Schneider

Reflexion

Was für den Teaser gilt, passt auch für eine Reflexion am Ende eines Protokolls oder einer Präsentation. Besonders bei Präsentationen lässt sich die normale langweilige „Vielen Dank für Ihre Aufmerksamkeit“ Seite nutzen, um in den letzten Minuten den Fokus nochmals auf die Schlagworte zu richten. Eindrucksvoll ist auch ein farbliches Hervorheben der Schlagwörter, die Sie in der Präsentation erklärt haben.

Einer bessere letzte Folie mit Word Cloud und etwas Animation könnte für meine Präsentation Projektstrukturplan in 3 Minuten so aussehen.

Visualisierung

Überall wo Schlagworte in Workshops entstehen, ist eine Word Cloud eine abwechslungsreiche Visualisierung.

Das kann eine Darstellung einer Kartenabfrage sein oder eine Zusammenfassung von Ideen aus einer durchgeführten 6-3-5 Methode. Das sorgt neben Whiteboard- und Flipchart-Fotos für Abwechslung im Workshop-Protokoll.

Diagramm-Alternativen

Auch für ganz andere Darstellungen finde ich Word Clouds durchaus für passend. Gerade wenn Visualisierungen Kategorien über Größen darstellen, ist eine Word Cloud eine geeignete Form.

Als Beispiel dafür kann ein Projektportfolio stehen. In einem Projektportfolio werden verschiedene Projekte zusammengefasst. Im Management-Bericht könnte so die aktuelle Projektstundenübersicht mit einer Word Cloud der Projekte mit der Schriftgröße relativ zu den geleisteten Projektstunden visualisiert werden.

Anstelle einer tabellarischen Liste mit Bezeichnung und Aufwand entsteht eine einfach Visualisierung.

So ist auf einen Blick klar, welche Projekte die größten Aufwände beinhalten.

Word Clouds erstellen

Das Erstellen einer Word Cloud ist heute kein Problem. Es gibt viele unterschiedliche Möglichkeiten.

1. Über Webseiten

Im Web existiert eine Vielzahl von Seiten, die Word Clouds erstellen. Viele davon sind gratis. Manche erfordern aber einen Login. Die Bedienung ist aber immer sehr ähnlich.

1. Text einfügen
   Im ersten Schritt muss der zu analysierende Text in ein Eingabefeld kopiert werden
2. Word Cloud Einstellungen vornehmen
   Je nach Anbieter gibt es unterschiedliche Möglichkeiten. Sie reichen von Schriftart, über Farbe und Drehwinkel bis zur Auswahl oder Gestaltung einer Umrissform
3. Word Cloud generieren und downloaden
   Der Download ist als Bild, manchmal auch als SVG-Datei (https://www.jasondavies.com/wordcloud/) möglich

2. Über Add-Ins

Für Microsoft Office gibt es den „Pro Word Cloud“ Add-In, welcher nach der Aktivierung direkt in Word, Excel oder PowerPoint integriert ist. Das ist sehr komfortabel. Es reicht aus, den zu analysierenden Text auszuwählen und den Add-In aufzurufen. Mit zwei Klicks ist die Word Cloud auch schon als Bild im Dokument eingefügt.

Gedanken zur Sicherheit

Die allermeisten Word Cloud Anbieter arbeiten über Webseiten. Das ist zwar bequem, damit ist es aber absolut unklar, was mit den übertragenen Daten passiert. Das ist gerade für den Einsatz im Büro mit Daten aus Präsentationen oder Besprechungsprotokollen schwierig. Wohin werden Texte übertragen oder gespeichert? Das Risiko bleibt, dass auf diese Weise übertragene interne Protokolle, Berichte oder Präsentationstexte auf die Server der Anbieter gelangen.

Die dritte Möglichkeit

Wollen oder dürfen Sie dieses Risiko nicht eingehen? Dann gibt es nicht viele Lösungen. Eine Software, die Sie lokal auf Ihrem Rechner installieren können, habe ich bisher nicht gefunden.

Damit bleiben nur die eigene Umsetzung und Programmierung. Glücklicherweise gibt es verschiedene Möglichkeiten, die dabei helfen.

Gute Bibliotheken sind z. B. für Python verfügbar. Links finden Sie im Anhang. Python ist für mich aber nicht die erste Wahl. Jeder Anwender muss dafür Python installiert haben. Das ist auf einem Firmenrechner nicht immer möglich.

Deswegen fällt meine Wahl für eine Programmierung auf eine lokale Webseite und die D3.js Bibliothek. Mit der Erweiterung d3cloud.js von Jason Davies lässt sich eine Word Cloud ebenfalls sehr komfortabel generieren. 

Teilen ist besser

Word Cloud Tools gehen, wie oben beschrieben, immer gleich vor. Sie leiten die Schlagwort-Liste aus einem Text ab. Damit wird das Aussehen durch die Häufigkeit der Wörter gesteuert. Für die Anwendungsfälle im Büro ist es aber sinnvoll, Einfluss auf die Schlagwörter zu nehmen. Das geht zwar auch, indem gewünschte Wörter öfter in den Text kopiert werden – es ist aber nicht komfortabel.

Von dieser Logik aus ist es besser, ein Tool an dieser Stelle zu teilen. Damit haben Sie als Anwender die volle Kontrolle. Zum einen, eine Word Cloud aus einem beliebigen Text zu erzeugen, zum anderen, den Fokus auf die Schlagwörter zu lenken und diese selber anzupassen.

Teil 1: Generieren einer Wortliste aus einem Text mit der Angabe der Häufigkeit

HTML Dokument

Wie bei den allermeisten Webseiten für Word Clouds gibt es auch in meiner Version ein Eingabefeld für den zu untersuchenden Text. In das Feld kann jeder beliebige Text über die Zwischenablage eingefügt werden.

Dazu kommt noch ein Button, um die Generierung der Wortliste zu starten. Im Gegensatz zu anderen Webseiten finden Sie hier noch ein weiteres Textfeld. In dieses wird die generierte Wortliste am Ende eingefügt. Sie enthält dann alle Wörter und die Häufigkeit.

Im HTML-Dokument sind die Tags für Eingabefelder und den Button enthalten. Außerdem werden die Tags mit Bootstrap Style (css/bootstrap.min.css) grafisch etwas verbessert.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <title>Wörterliste erstellen</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand">Wörterliste erstellen</a>
      <div class="d-flex">
        <a class="me-2" href="word-cloud-erstellen.html">Weiter</a>
      </div>
    </nav>
    <div class="row g-3 m-5">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
          <label for="text" class="form-label">Text einfügen zum Auswerten</label>
          <textarea class="form-control" id="text" name="text" rows="8" cols="80"></textarea>
        </div>
        <div class="col-3"></div>
        <div class="col-2 m-3">
          <label class="form-label" for="sort">Sortierung nach</label>
          <select id="sort" class="form-select">
              <option value="0" selected>Häufigkeit</option>
              <option value="1">Alphabetisch</option>
          </select>          
        </div>
      <div class="col-1"></div>
      <div class="col-3">
            <button type="button" class="btn btn-secondary mt-4 mb-1" onclick="createWordlist()">Wörterliste erstellen</button>
        </div>
        <div class="col-md-3">
        </div>        
        <div class="col-md-6">
          <label for="list" class="form-label">Wörterliste mit Anzahl (Wort,Anzahl)</label>
          <textarea class="form-control" id="list" name="list" rows="6" cols="80"></textarea>
        </div>
    </div>
  <script src="js/wordlist.js"></script>
</body>

Der JavaScript Code mit aller Logik befindet sich im Ordner js.

JavaScript Code

Der Button startet über die Click-Funktion createWordlist() den Prozess. Zuerst wird über document.getElementById(„text“).value der zu untersuchende Text in eine Variable kopiert. Dann werden über replace Satz- und Sonderzeichen, Zahlen und Tabulatoren entfernt. Jetzt lässt sich der Text über die split-Funktion in ein Array umwandeln.

Eine forEach-Schleife prüft jedes enthaltene Wort über die Funktion addWord():

• Ist es neu? Dann wird es in den Index aufgenommen, die Häufigkeit ist 1
• Ist es schon vorhanden? Dann wird die Häufigkeit um 1 erhöht

Dafür arbeite ich mit einem Dictionary. Ein Dictionary unterscheidet als Key Groß- und Kleinbuchstaben. Das ist hier aber nicht sinnvoll. Deswegen werden alle Key’s vorher in Kleinbuchstaben umgewandelt. Wort und Häufigkeit sind dem Key als Objekt zugeordnet.

Um einen Überblick über die so generierte Wortliste zu bekommen, finde ich es sinnvoll sie nach der Häufigkeit zu ordnen. Suche ich aber ein bestimmtes Wort, ist eine alphabetische Sortierung besser. Aus dem Grund gibt es noch ein SELECT Tag im HTML-Code. Dort lässt sich diese Auswahl einstellen.

Die Sortierung funktioniert am besten mit der eingebauten JavaScript-Funktion sort des Arrays. Für ein Dictionary klappt das nicht. Deswegen kopiere ich mir das Dictionary in ein normales Array um und sortiere dieses.

Danach kann über dieses Array der Ausgabestring in CSV-Format erstellt und dem Eingabefeld übergeben werden.

//Dictionary für die Wortliste
var wordlist;

//Neues Wort dem Dictionary hinzufügen
function addWord(word) {
    //zuerst Wort trimmen und in Kleinschreibung
    word=word.trim();

    //wenn Länge groß genug ist, dann einfügen oder hochzählen
    //in, am, ein, der, die, das >>> mindestens 4 Buchstaben
    if (word.length>3) {    
        const key=word.toLowerCase();
        if (wordlist[key]==null) {
          wordlist[key]={word: word, count: 1};
        } else {
          wordlist[key].count=wordlist[key].count+1;
        }
    }
}

//Wortliste erzeugen
function createWordlist() {
    //Wortliste löschen
    wordlist=[];

    //Text aus Areatext holen
    let txt = document.getElementById("text").value;

    //Sonderzeichen ersetzen
    txt = txt.replace(/[•+\-/\\(){}\[\]<>!§$%&=?*#€¿&_\".,:;0-9]/g," ");
    //und noch alle TABs entfernen
    txt = txt.replace(/[\t]/g," ");

    //Text in Array umwandeln mit Leerzeichen als Trenner
    let txtsplit = txt.split(" ");

    //Wörter hinzufügen oder hochzählen
    txtsplit.forEach((d,i) => {
      addWord(d);
    });


    //Dictionary umkopieren in Array, um es einfacher zu sortieren 
    sortlist = [];
    for (const [key, value] of Object.entries(wordlist)) {
      sortlist.push({word: value.word, count: value.count});
    }

    //Sortierart holen
    let sort = document.getElementById("sort").value;
    if (sort==1) {
        //alphabetisch sortieren
        sortlist.sort(function(a,b) {
            if (b.word.toLowerCase() > a.word.toLowerCase()) {return -1}
            else if (b.word.toLowerCase() < a.word.toLowerCase()) {return 1}
            return 0;
        }); 
    } else {
        //nach Häufigkeit sortieren
        sortlist.sort(function(a,b) {
            return b.count - a.count;
        });    
    }

  //Wortliste ausgeben: Wort,Häufigkeit
  let output="";
  sortlist.forEach(d => {
      output=output+d.word+","+d.count+"\n";
  });

  //Ausgabeliste in Areatext einfügen
  document.getElementById("list").value=output;
}

Teil 2: Erzeugen der Word Cloud aus der Wortliste

HTML Dokument

Auch für die Word Cloud macht es Sinn, mehrere Parameter über die HTML-Seite einem Benutzer zur Verfügung zu stellen.

Die wichtigsten sind die Höhe und Breite des SVG-Tags. Um ein bisschen mit dem Aussehen der Word Cloud spielen zu können, gibt es noch eine Auswahl zur Winkellage der einzelnen Wörter. Ihnen fallen bestimmt noch weitere sinnvolle ein. Eine kleine Auswahl finden Sie im HTML-Code auskommentiert bezüglich der Farben.

Interessant ist auch, nicht alle Wörter zu visualisieren. Das Feld Min. Häufigkeit ist für eine Einschränkung in diese Richtung da.

JavaScript Code

// Globale Variablen
var worddata;
var width=600;
var height=300;
var wrotationIndex=1;
var wcount=2;

//Farbdefinitionen: https://observablehq.com/@d3/color-schemes
//var colorScale = d3.scaleOrdinal(d3.schemeCategory20); //pastell
var colorScale = d3.scaleOrdinal([`#383838`, `#585858`, `#777777`, `#999999`, `#AAAAAA`, `#BBBBBB`, `#CCCCCC`]); //grau
//var colorScale = d3.scaleOrdinal(["#f2f2f2","#e2e2e2","#cecece","#b4b4b4","#979797","#7a7a7a","#5f5f5f","#404040","#1e1e1e","#000000"]);
//var colorScale = d3.scaleOrdinal(["#23171b","#4a58dd","#2f9df5","#27d7c4","#4df884","#95fb51","#dedd32","#ffa423","#f65f18","#ba2208","#900c00"]); //bunt
var g = d3.select("svg").append("g");

function wordcloudUpdate() {
    //Einstellungen der Word Cloud holen
    width=document.getElementById("wwidth").value;
    height=document.getElementById("wheight").value;
    wrotationIndex=document.getElementById("wrotationIndex").value;
    wcount=document.getElementById("wcount").value;
    let txt=document.getElementById("wordlist").value;

    //Höhe und Breite für SVG setzen
    d3.select("svg")
        .attr("width",width)
        .attr("height",height);

    //evtl. vorhandene Word Cloud entfernen
    g.selectAll(".wordcloud").remove();

    //Wörterliste parsen
    var dataraw=d3.csvParse("word,count\n"+txt);
    var data=[];

    //wenn Häufigkeit >= dem Eingabefeld ist, dann Wort aufnehmen
    dataraw.forEach(d => {
        if (parseInt(d.count)>=wcount) {
            data.push(d);
        }
    })

    //Skalierung der Schriftgröße über d3
    var fontSizeScale = d3.scaleLinear()
        .domain(d3.extent(data, d => parseInt(d.count))) //min und max der Häufigkeit finden
        .range([10,50]); //umrechnen der Häufigkeit in den Fontsize-Bereich 10..50

    //Word Cloud layout berechnen    
    var layout = d3.layout.cloud()
        .size([width, height])
        .timeInterval(20)
        .words(data)
        //.rotate(function (d) { return d.word.length>5 ? 0 : 90; })
        .rotate(function()  { //eingestellten Drehwinkel umsetzen
          if (wrotationIndex==1) {
              return 0;
          } else if (wrotationIndex==2) {
              return ~~(Math.random()*2)*90;
          } else if (wrotationIndex==3) {
              return ~~(Math.random()*4)*45;
          } else { return ~~(Math.random()*360); }
        })
        .fontWeight(["bold"]) //Schriftart FETT
        .fontSize(function(d,i) { return fontSizeScale(d.count); }) //Häufigkeit in Schriftgröße umrechnen
        .text(function(d) { return d.word; })
        .on("end", draw); // Word Cloud zeichnen mit function draw

    layout.start();
    worddata=Object.assign(data);
}

//Funktion zum Zeichnen der Word Cloud in das SVG Bild
function draw(words) {
    var wordcloud = g.append("g")
        .attr('class','wordcloud')
        .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

    wordcloud.selectAll("text")
        .data(words)
        .enter().append("text")
        .attr('class','word')
        .style("fill", function(d, i) { return colorScale(i); })
        //.style("opacity", .75)
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", function(d) { return d.font; })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) { 
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
        })
        .text(function(d) { return d.word; });
};
    
    
//Bereitstellen der Word Cloud mit allen wichtigen Daten für Excel
//Einfügen über Zwischenablage und "Text in Spalten" umwandeln
function wordcloudExcelData() {
    let exp;
    let cl;
    //Kopfzeile
    exp="word,font,size,x,y,width,height,rotation,color";
    //alle Wörter ausgeben
    worddata.forEach((d,i) => {
        //Farbe es Wortes ermitteln  
        cl=colorScale(i);        
        //Farbe in Excel Farbformat umwandeln
        cl="&H"+cl.substr(-2)+cl.substr(3,2)+cl.substr(1,2);

        exp=exp+'\n'+d.word+','+d.font+','+d.size+','+d.x+','+d.y+','+d.width+','+d.height+','+d.rotate+','+cl;
    });
    //Liste in das Textfeld kopieren  
    d3.select('#exceldata').text(exp);
}


//Word Cloud als SVG-Bild downloaden
function wordcloudDownload() {
    let svgData=document.getElementById("worddcloud").outerHTML;
    let preface='<?xml version="1.0" standalone="no"?>\r\n';
    let svgBlob=new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
    let svgUrl=URL.createObjectURL(svgBlob);
    let downloadLink=document.createElement("a");
    downloadLink.href=svgUrl;
    downloadLink.download="wordcloud.svg";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);      
}

Einfügen in Word, Excel oder PowerPoint

Jetzt ist es aber höchste Zeit auszuprobieren, wie eine sicherheitstechnisch unbedenkliche Word Cloud eines Besprechungsprotokolls oder eine Präsentation aussieht.

Unter Downloads können Sie ein Zip-Archiv herunterladen und selber ausprobieren.

Die erzeugte Word Cloud lässt sich als SVG-Datei downloaden. In der Microsoft Office Version ab 2019 können Sie SVG-Dateien als Bilder einfügen.

Individuell anpassen lassen sie sich aber erst, wenn Sie über die rechte Maustaste das Kontextmenü aufrufen und auf die Funktion Gruppierung aufheben klicken. Jetzt wird das Bild in einzelne Shapes zerlegt, die sich beliebig weiter nach Ihren Ideen anpassen lassen.

Viel Spaß beim Ausprobieren!

Wie ist Ihre Idee für den Einsatz von Word Clouds im Büro?

Download oder direkt ausprobieren

Direkt ausprobieren: woerterliste-erstellen.html oder word-cloud-erstellen.html

Links

• Wikipedia: Schlagwortwolke https://de.wikipedia.org/wiki/Schlagwortwolke
• D3.js https://d3js.org/
• D3 Cloud https://github.com/jasondavies/d3-cloud

Mehr zum Thema D3.js oder Word Clouds in meinem Blog

Word Cloud Generatoren

Microsoft Office Add-In

• https://appsource.microsoft.com/de-de/product/office/wa104038830?tab=overview

Webseiten

• https://www.abcya.com/games/word_clouds
• https://www.jasondavies.com/wordcloud/
• https://monkeylearn.com/word-cloud/
• https://tagcrowd.com/
• https://wordart.com/
• https://www.wordclouds.com/
• https://worditout.com/word-cloud/create

Python Tools

• https://www.datacamp.com/community/tutorials/wordcloud-python
• https://github.com/amueller/word_cloud

Bücher zum Thema D3.js:

• Elija Meeks, D3.js in action
• Philipp K. Janert, D3 Praxisbuch