Webbasierte Datenvisualisierung
Die Webbasierte Datenvisualisierung ist die Visualisierung von Daten und Informationen mittels Web-Technologie. Sie besteht aus den drei Komponenten Backend, Frontend sowie Visualisierungs-Pipeline. (P)
Die Webbasierte Datenvisualisierung ist die Visualisierung von Daten und Informationen mittels Web-Technologie und besteht aus drei Komponenten:
- Backend : hier werden Daten gespeichert und verarbeitet, z. B. werden Daten von Daten bzw. Informationen aus Daten abgeleitet.
- Frontend: hier werden die Daten dargestellt.
- 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.
Inhaltsverzeichnis
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.
JavaScript
Grafiken
Grafiken sind ein Bild (Frame) oder mehrere Bilder in einer Datei, die direkt von einem Web-Browser angezeigt werden können.
Rastergrafik
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/