Webbasierte Datenvisualisierung

Was ist Webbasierte Datenvisualisierung? Definition:

Die Webbasierte Datenvisualisierung ist die Visualisierung von Daten und Informationen mittels Web-Technologie. Sie besteht aus den drei Komponenten Backend, Frontend sowie Visualisierungs-Pipeline.

Auch oft gesucht: Visualisierung

Die Webbasierte Datenvisualisierung ist die Visualisierung von Daten und Informationen mittels Web-Technologie und besteht aus drei Komponenten:

1. Backend : hier werden Daten gespeichert und verarbeitet, z. B. werden Daten von Daten bzw. Informationen aus Daten abgeleitet.
2. Frontend: hier werden die Daten dargestellt.
3. Visualisierungs-Pipeline hier erfolgt das Mapping der (in der Regel präsentationsneutralen) Daten in eine Datenstruktur für die jeweilige grafische Visualisierungs-Methode.

Siehe Wiki Datenvisualisierung für mehr Hintergrundinformationen.

Frontend-Technologie

Bei der webbasierten Datenvisualisierung werden Web-Technologien verwendet, die Daten direkt oder ggf. mittels eines Plugins in einem Web-Browser laden, interpretieren und darstellen.

HTML

HTML (Hypertext Markup Language) ist die Markup-Sprache des Webs. Vor allem textuelle Informationen werden damit dargestellt bzw. grafische Darstellungsformen eingebettet.

CSS

Mit CSS (Cascading Style Sheets) werden textuell Layout-Informationen der mit HTML beschriebenen Dokumente definiert, z. B. welche Schriftart verwendet wird, wie groß ein Text ist und welche Farbe er hat.

Grafiken

Grafiken sind ein Bild (Frame) oder mehrere Bilder in einer Datei, die direkt von einem Web-Browser angezeigt werden können.

Vektorgrafik

Mit SVG (Scalable Vector Graphics) lassen sich - wie der Name schon sagt, vektororientiert Grafiken beschreiben. Mit SVG wird das "Zeichnen" durch den Browser beschrieben. Dies bietet zwei Vorteile:

• Die "Grafik" (es ist ja nur ein Textfile) ist sehr klein
• Die Darstellung ist optimal für das jeweilige Display, da das Zeichnen am jeweiligen Gerät erfolgt. Somit entfallen z. B. Aliasing-Effekte.

3D-Grafik

• Apples WebKit „GPU for the Web“
• WebGL
• Direct3D

Software

Im Folgenden liegt der Fokus auf Open-Source-Software, die für die Daten- bzw. Informations-Visualisierung im Web geeignet ist.

Applikationen

Applikationen zur Datenvisualisierung, die Formate fürs Web exportieren.

Camunda

Camunda ist ein BPM-System mit dem Geschäftsprozesse als BPMN modelliert und als PNG, JPEG, SVG export werden können.

Gephi

Gephi ist eine Software zur Visualisierung und Exploration von Graphen sowie Netzwerke. Open-source.

Blender

Für 3D-Modell und fotorealistisches Rendering

Octave

GNU Octave ist eine mathematisch orientierte Umgebung mit Zeichen- und Visualisierungs-Tools.

R

Das R Project ist für statistische Berechnung von Daten mit grafischer Darstellung.

Web-Frameworks

Web-Frameworks sind fester Bestandteil einer Web-Applikation, die in der Regel das Lesen der Daten vom Server oder einer andern Quelle (z. B. via RSS) sowie das Rendern im Browser übernehmen.

Bootstrap

Bootstrap ist ein populäres HTML, CSS, und JS Framework zur Entwicklung von responsive Websites; also Gerüst für Websites mit Grafiken.

Bootstrap kann selbst mit Themes erweitert werden:

• Start Bootstrap: Einer Sammlung freier Bootstrap Themes, Dashboard templates und Webapp UI kits.

Cesium

An open-source JavaScript library for world-class 3D globes and maps

Chart.js

Simple yet flexible JavaScript charting for designers & developers

deck.gl

WebGL-powered Framework für die visuelle Exploration zur Datenanalyse von großen Datensets.

D3.js

Empfehlung D3.js ist eine JavaScript Bibliothek zur datenbasierten Erstellung von Dokumenten. D3 bringt Leben in die Website mit HTML, SVG und CSS. D3 setzt auf Web-Standards mit hoher Kompatibilität zu modernen Web-Browsern. D3 kombiniert mächtige Visualisierungskomponenten mit einem data-driven Ansatz der DOM-Manipulation.

Lizenz: BSD

dygraphs

dygraphs ist eine schnelle und flexible open source JavaScript charting library.

Lizenz: MIT

Shiny

A web application framework for R. Turn your analyses into interactive web applications. No HTML, CSS, or JavaScript knowledge required.

JavaScript InfoVis Toolkit

JavaScript Framework für Interaktive Datenvisualisierung im Web. Kostenfreier Download. Spende erbeten.

OpenLayers

A high-performance, feature-packed library for all your mapping needs.

Leaflet

an open-source JavaScript library for mobile-friendly interactive maps

Plotly

Plotly's Python graphing library makes interactive, publication-quality graphs online. Examples of how to make line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, polar charts, and bubble charts.

pygal

Sexy python charting. Generiert SVG.

Matplotlib

Matplotlib is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats and interactive environments across platforms. Matplotlib can be used in Python scripts, the Python and IPython shell, the jupyter notebook, web application servers, and four graphical user interface toolkits.

The Jupyter Notebook

The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and explanatory text. Uses include: data cleaning and transformation, numerical simulation, statistical modeling, machine learning and much more.

Nicht Open Source

fusioncharts

The most comprehensive JavaScript charting library, with over 90+ charts and 1000+ maps. Loved by 27,000 customers in 118 countries.

Highcharts

Highcharts makes it easy for developers to set up interactive charts in their web pages. Highcharts is a JavaScript charting library with a huge range of chart options available. The output is rendered using SVG in modern browsers and VML in Internet Explorer.

Elastic Kibana

cool, aber nicht Open-Source.

Plattformen

A Comprehensive Data Integration and Business Analytics Platform

Quellen

• Blender 3D Creation Homepage https://www.blender.org/
• Bootstrap Homepage http://getbootstrap.com/
• Cesium Homepage https://cesiumjs.org/
• chart.js Homepage http://www.chartjs.org/
• deck.gl Homepage
• d3.js Homepage https://d3js.org/
• dygraphs Homepage http://dygraphs.com/
• Elastic Kibana Homepage https://www.elastic.co/de/products/kibana
• Gephi - The Open Graph Viz Platform Homepage https://gephi.org/
• The R Project for Statistical Computing Homepage https://www.r-project.org/
• The Jupyter Notebook Homepage http://jupyter.org/
• Leaflet Homepage http://leafletjs.com/
• Matplotlib Homepge https://matplotlib.org/
• Shiny by RStudio https://shiny.rstudio.com/
• Octave Homepage http://www.gnu.org/software/octave/
• OpenLayers Homepage https://openlayers.org/
• Plotly Python Library Homepage https://plot.ly/python/
• pygal Homepage http://www.pygal.org/en/stable/

Nicht Open-Source

• FusionCharts Homepage http://www.fusioncharts.com/
• HighCharts Homepage https://www.highcharts.com/

Plattformen

• penthao Homepage http://www.pentaho.com/