angular-chart

Real time collaborative Visual Analytics with AngularJS and D3.js

Surveyor
Prof. Dr. Michael Granitzer
Adviser
Dr. Robert Basmadjian
Author
Max Klenk
Ich möchte euch heute meine Bachelorarbeit vorstellen. Ich habe sie bei Prof. Granitzer in Kooperation mit dem Passauer Startup ONE LOGIC geschrieben. Bei ONE LOGIC hat mich Robert Basmadjian betreut.
Wie der Titel schon sagt, befasse ich mich damit wie man collaborativ Daten visualisieren kann um daraus nachhalti Wissen zu generien.
Ich werde euch erst erklären warum das überhaupt wichtig ist. Dann die potentiellen Tools zeigen mit denen man die Problematik angehen kann, bevor ich euch meine Lösung zeige. Die Usability meines Tools habe ich in einer Studie untersucht und natürlich gibt es noch eine ganze Menge Möglichkeiten auf meiner Arbeit aufzubauen.

Motivation

Wie gesagt möchte ich euch erst zeigen was überhaupt das Problem ist.
1/31

Motivation

The Problem

Source: http://quipro.mx/sites/default/files/bigdata.png
Die ganze Welt redet über Big Data, Unternehmen sammeln Daten wie wild und Regirungen stellen öffentlich Daten ins Netz. Vor zwei Wochen haben wir vorgestellt bekommen wie schwierig es ist diese Daten zusammen zu bringen und daraus Erkenntnis zu bekommen.
2/31

Motivation

The Problem

Source: self-made
Das Ergebnis dieser ganzen Arbeit sind allerdings meist statische Diagramme, in denen viel Information verloren geht. Zum Beispiel kann man nicht mehr sehen welchen Wert genau der rote Balken Mittwochs hat. Es gibt keinen Zugang zu den der Visualisierung zugrunde liegenden Daten, sodass niemand sie in verhältnis mit anderen Daten setzen kann oder anders darstellen kann.
3/31

Motivation

Use Cases - Blogs

Source: http://uniblog.rzblogs.uni-passau.de/2013/07/03/wahlbeteiligung-der-studierenden-steigt-uberall/
In Blogs werden Daten veröffentlicht, wie hier die Wahlbeteiligung. Wer allerdings das Diagramm für dieses Jahr erstellen will muss erst wieder alle Werte in erfahrung bekommen.
4/31

Motivation

Use Cases - One Data

Source: self-made
Auch für Unternehmen, wie ONE LOGIC, ist es wichtig ihre Auswertungen mit Kunden zu teilen. Dabei kann es sich um livedaten handeln die sich regemäßig ändern oder bestimmte Punkte müssen hervorgehoben werden um sie besser zu kommuniziren.
5/31

Motivation

Use Cases - 42-Data

Source: http://42-data.org
Im 42-data Projekt geht es darum das Wissenschaftler Fragen mit Datenquellen und einer entsprechenden Visualisierung beantworten. Gerade hier wäre es sinnvoll anderen die Möglichkeit zu geben aus den Daten andere Diagramme zu erstellen um die Fragen noch passender zu beantworten.
6/31

Motivation

Use Cases - Visual Analytics

Source: http://code.know-center.tugraz.at/vis
Im Titel meiner Arbeit kommt außerdem Visual Analytics vor, dabei geht es darum Erkenntnis aus daten zu ziehen indem man sie von verschiedenen Blickwinkeln betrachtet. In diesem Beispiel werden durch eine Selektion im ersten Diagramm die korrespondierenden Punkte im zweiten Diagramm hervorgehoben.
7/31

Motivation

Requirements

Supported Chart Types

Data Source

Scalability

Um ein Tool zu finden, dass in all diesen Scenarien eingesetzt werden kann habe die Anforderungen dafür gesammelt und werde die wichtigsten jetzt kurz vorstellen.
Besonders wichtig finde ich kombinationen von mehreren Diagrammen, zum Beispiel ein Punktdiagramm mit einer Trendline. Es ist unmöglich im vorhinein alle je benötigten Diagrammtypen einzubauen, deshalb muss das System erweiterbar sein.
Das Format der zu grunde liegenden Daten ist nicht entscheidend, da man sie meist in ein benötigtes Format konvertieren kann. Allerdings sollten die Daten spezifizierbar sein, sodass Währungen oder ein Datum richtig dargestellt werden können.
Es sollte natürlich nicht ausgeschlossen sein mehrer Diagramme gleichzeitig anzuzeigen.
8/31

Motivation

Requirements

Reusability and Integration

Interaction

State of the art

9/31

State of the art

Commercial Libraries

Source: http://www.fusioncharts.com/
Adress businesses with dashboard solutions, maps...
10/31

State of the art

Free Libraries

Source: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks
11/31

State of the art

Free Libraries

Google Charts

Chart.js

Flot

D3.js

  • Google Chart - Google Analytics
  • Chart.js very easy to use, lots of users
  • Flot - jQuery, HTML5 canvas
  • D3.js - All kinds of visualizations
12/31

State of the art

Comparison

Legend
important supported unsupported

Highcharts

paid > 90 charts custom charts SVG no selections / annotations

FusionCharts

paid no custom charts SVG no selections annotations

Google Charts

no custom charts data schema SVG selections annotations

Chart.js

custom charts no events HTML5 no selections no annotations

Flot

custom charts no SVG selections no annotations

D3.js

custom charts data schema SVG selections annotations
Die wichtigsten positiven/negativen, komplette tabelle zu groß.
Zeilenweise durchgehen

Approach

13/31

Approach

Methodology - D3.js

D3.js (Data-Driven Documents) is a JavaScript library for manipulating documents based on data. It can be used for any kinds of visualization and DOM manipulation. It can be a lot more than required in my work
14/31

Approach

Methodology - C3.js

15/31

Approach

Methodology - AngularJS





Hello{{user.firstname ? ' ' : ''}}{{user.firstname}}{{user.lastname ? ' ' : ''}}{{user.lastname}}!




user: {{user}}
AngularJS lives in the DOM and does not manipulate it from outside, like jQuery. Diget circle checks for changes. Two way databinding
16/31

Approach

Technical Solution

Angular Directive:

<angularChart options="options" dataset="dataset" schema="schema"></angularChart>

Two-Way Data binding:

AngularJS <> angular-chart <> C3.js
create own tag, to have dom manipulation only in there, watch variables to redraw
17/31

Approach

Technical Solution

JSON config

{
  'rows': [{
    'key': 'sales',
    'type': 'area-spline',
    'axis': 'y',
  }, {
    'key': 'trend',
    'show': false
  }],
  'xAxis': {
    'key': 'date'
  },
  'annotation': [{
    'axis': 'x',
    'value': '10.10.2013',
    'label': 'start'
  }],
  'type': 'line',
  'zoom': {
    range: [2, 4]
  }
}
      
18/31

Approach

angular-chart: chart type

options.type: {{optionsChartType.type}}
my chart
19/31

Approach

angular-chart: legend

options.xAxis.rows[0].type: {{optionsRows.rows[0].type}}
options.xAxis.rows[3].show: {{optionsRows.rows[4].show}}
options.xAxis.rows[3].axis: {{optionsRows.rows[4].axis}}
my chart
20/31

Approach

angular-chart: xAxis

options.xAxis.key: {{optionsXAxis.xAxis.key}}
my chart
21/31

Approach

angular-chart: zoom

options.zoom:
{{optionsZoom.zoom}}
my chart
22/31

Approach

angular-chart: annotations

opt.annotation[0]: {{optionsAnnotations.annotation[0]}} opt.annotation[1]: {{optionsAnnotations.annotation[1]}}
my chart

Evaluation

eval
23/31

User Evaluation

Thinking Aloud - Users

Students, UI Developers, Data Scientists Source: http://www.ac4d.com/classes/201_open/03.AC4D_IDSE201_ThinkAloudProtocol.pdf
Evaluating the usability by encouraging a user to think out loud.
24/31

User Evaluation

Thinking Aloud - Setup

Source: http://www.ac4d.com/classes/201_open/03.AC4D_IDSE201_ThinkAloudProtocol.pdf
Evaluating the usability by encouraging a user to think out loud.
25/31

User Evaluation

Thinking Aloud - Test

Show problems: Icons, tooltips, subchart
26/31

User Evaluation

Thinking Aloud - Results

Usability problems identified:

Feature wish list:

User understood were actions can be performed.

Future Work

27/31

Future Work

Improve Usability

Source: self-made
Box plots, stacked bar charts
28/31

Future Work

More chart types

Source: http://bl.ocks.org/jensgrubert/7789216
Box plots, stacked bar charts
29/31

Future Work

Chart Export

Source: http://www.fusioncharts.com/explore/export-charts-as-images-and-PDF/
Image for (facebook) preview
SVG to integrate without interactivity
30/31

Future Work

Server Integration

Source: self-made
Image for (facebook) preview
SVG to integrate without interactivity
31/31

angular-chart

Open Source Project

Source: https://github.com/maxklenk/angular-chart/
Open Source, integration in package manger, CI, 100% coverage, Demo Seite

Use a spacebar or arrow keys to navigate