JavaScript-Bibliothek für Sketch-Grafiken

Kommt es bei einer Grafik nicht auf präzise Genauigkeit an, erweckt eine locker gezeichnet aussehender Chart mehr Aufmerksamkeit als eine langweilige Excel-Grafik im immer gleichen Stil. Beim Erzeugen solcher Grafiken hilft die JavaScript-Bibliothek RoughViz.js. Sie wird einfach in den Code einer HTML-Seite eingebunden mit

 <script src="https://unpkg.com/rough-viz@1.0.5"></script>

und kann dann sehr einfach genutzt werden. Jede der anzuzeigenden Grafiken bekommt einen eigenen div-Container. Den Aufbau der Grafik übernimmt der Aufruf des eingebundenen Skripts in dieser Art:

new roughViz.Bar({ 
    element: '#vis0', // container selection 
    data: 'https://raw.githubusercontent.com/jwilber/random_data/
           master/flavors.csv', 
    labels: 'flavor', 
    values: 'price' 
}); 

Als Chart-Optionen stehen neben Balken- und Säulengrafiken auch Donut, Scatter-Grafik, Linien- und Kreis-Diagramme zur Verfügung. Die Details der Grafiken lassen sich über vielfältige Eigenschaften und Optionen steuern. Darunter findet man auch, die "roughness", welche steuert, wie unordentlich die Zeichnung angezeigt wird.

Alles weitere erfahren Sie in dieser Beschreibung der Bibliothek auf GitHub – auch, wie Sie roughViz.js per Node-Paketmanager npm einbinden und wie sie es mit React oder Python nutzen können.