https://unsplash.com/photos/npxXWgQ33ZQ
Company News
Dear colleagues,
we proudly present our new IoT Dashboard ! 🎉
Your Industry 4.0 Working Group
http://192.168.178.143:8080/
overwhelming
57.000 €
no idea what to do with it
01/01/2012
01/07/2016
| Name | Hire Date | LOC |
|---|---|---|
| John | 31.01.1978 | 53279 |
| Smith | 01.07.1980 | 16507 |
Icon made by freepik from www.flaticon.com
?
!
Decision
Recommendation
Clear
Question
Icon made by freepik from www.flaticon.com
User
+
?
Clear
Question
Dashboard
Decision
Recommendation
!
10 seconds
Paper
Table
Diagram
"Decide, if ..."
Visualization Types
Dimensions
Encoding
Colors
https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf
https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf
https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf
https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf
https://extremepresentation.typepad.com/files/choosing-a-good-chart-09.pdf
Time
Location
Success / Failure
Access Type
User Segment
http://www.mmi.ifi.lmu.de/lehre/ws1920/iv/slides/iv_ws19_02_perception.pdf
Combination
Form
Color
Pre-attentive recognizable
attentive recognizable
https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization
Meaning & Rating
Color Blindness
colororacle.org
colorbrewer2.org
Axes
50
51
52
400
600
500
100
200
300
400
600
500
100
300
200
800
700
Proportion
10 %
Option B
20 %
Option A
http://www.stat.columbia.edu/~gelman/communication/Bateman2010.pdf
Icon made by freepik from www.flaticon.com
User:
?
Clear Question:
Pinterest • informationisbeautiful.net • behance.net • dailyinfographics.com
coolinfographics.com • visualcomplexity.com • flowingdata.com
improving-visualisations.org/visuals
Distribution
Interactions
http://192.168.178.143:8080/
http://192.168.178.143:8081/
Zoom
Move
Filter
Sort
Connect
Highlight
http://192.168.178.143:8080/
Variant A
Variant B
Variant C
Blue Button Test
Red Button Test
Yellow Button Test
https://unsplash.com/photos/REZp_5-2wzA
Requirements
Comparison
versatile
cost-effective
explorative
configurable
via UI
specialized
blackrockdigital.github.io/startbootstrap-sb-admin-2
Data Sources: any
Styling: any
Features: depend on the framework
versatile
cost-effective
explorative
configurable
via UI
specialized
versatile
cost-effective
explorative
configurable
via UI
specialized on Monitoring
Data Sources: 50+ plugins for data sources (e.g. MySQL, Elasticsearch)
Styling: themes customizable via SASS altering features
Features: depend on framework
play.grafana.org
versatile
cost-effective
explorative
configurable
via UI
specialized on exploration
Datea Sources: 80+ connectors (e.g. Microsoft, Oracle, SAP, Mongo DB, MySQL)
Styling: formatted via UI
Features: drag & drop, data representation
www.tableau.com
versatile
cost-effective
explorative
configurable
via UI
specialized on
IoT devices
Data Sources: ~ 15 connectors (e.g. MQTT, AWS IoT, IBM Watson, Azure Event Hub)
Styling: formatted via UI
Features: dashboard management by device
thingsboard.io
versatile
cost-effective
explorative
configurable
via UI
specialized on
IoT & web mashups
Data Sources: mainly JSON
Styling: formatted via UI
Features: online demo to try out, expandable via plugins
freeboard.github.io/freeboard/
versatile
cost-effective
explorative
configurable
via UI
specialized on
Node Red
Data Sources: ~ visualizes Node Red data
Styling: formatted via Node Red UI nodes
Features: themes, interactive elements
flows.nodered.org/node/node-red-dashboard
Decision
Recommendation
?
User With Clear Question
10 Seconds
Rule
!
https://unsplash.com/photos/dyYP4nCi7_o
https://unsplash.com/photos/PO7CGnoDFUI
Information Dashboard Design: The Effective Visual Communication of Data
https://dataschool.com/how-to-design-a-dashboard/
policyviz.com/helpmeviz
infoactive.co/data-design
datavizcatalogue.com
improving-visualizations.org
storytellingwithdata.com
blog.tr3dent.com/2016/03/21/top-10-data-visualization-experts-to-follow-on-twitter
lisacharlotterost.github.io/2016/04/22/Colors-for-DataVis
By Elisabeth Engel
