The document discusses various data visualization frameworks and tools used in programming languages such as R and Python for creating visual representations of large datasets. It highlights specific libraries like ggplot2, D3.js, and Dash, along with business intelligence tools like Tableau and Microsoft Power BI. Additionally, it references tutorials and resources for learning these technologies, aiming to assist designers and developers in effective data visualization.

1. 2 December 2005
Information Visualisation
Data Processing and Visualisation Frameworks
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
beatsigner.com

2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
March 18, 2021
Data Visualisation Frameworks and Tools
▪ Data visualisation tools
▪ provide data visualisation designers and developers an easier
way to create visual representations of large data sets
▪ Data visualisation frameworks and tools support
visualisations for different purposes
▪ interactive data exploration
▪ presentations
▪ dashboards
▪ annual reports
▪ business intelligence
▪ news articles and interactive storytelling (infographics)
▪ …

3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3
March 18, 2021
R
▪ Free open source programming language and
environment for statistical computing and graphics
▪ effective data handling and storage facility
▪ operators for calculations on arrays and matrices in particular
▪ large collection of tools for data analysis
▪ graphical facilities for data analysis and display
▪ ggplot2
▪ data visualisation package
for R
▪ implementation of
Leland Wilkinson's
Grammar of Graphics

4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4
March 18, 2021
RStudio IDE
▪ Integrated tools for en-
hanced productivity with R
▪ syntax highlighting, smart
indentation and code
completion
▪ direct execution of R code
from the source editor
▪ workspace browser and
data viewer
▪ integrated help windows
▪ interactive debugger
▪ …

5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5
March 18, 2021
Video: R Programming Tutorial

6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6
March 18, 2021
Dash
▪ Interactive visualisation library for R and Python
▪ plotly graphing + UI framework
▪ uses Flask as a backend (Python) and React.js as a frontend
▪ supports streaming data (REST)

7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7
March 18, 2021
D3.js: Data-Driven Documents
▪ Flexible JavaScript library combining powerful
visualisation components and a data-driven approach to
DOM manipulation
▪ based on web standards such a HTML5, SVG and CSS
▪ load data and bind it to elements within the document (DOM)
▪ transform elements based on visual properties

8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8
March 18, 2021
D3.js: Data-Driven Documents …
▪ Large datasets bound to SVG objects via D3.js functions
▪ Very powerful and customisable based on low-level API
▪ need some programming skills
▪ steep learning curve but large number of possible chart types
▪ Based on earlier academic research projects by Jeff
Heer et al. including prefuse, Flare and Protovis
▪ original D3 research paper from 2011 available at
http://vis.stanford.edu/files/2011-D3-InfoVis.pdf
▪ Apps for non-programmers
▪ NVD3 charting library, plotly.js charting library or Plotly’s Chart
Studio

9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9
March 18, 2021
Video: Making a Bar Chart with D3.js

10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10
March 18, 2021
React-Vis
▪ React.js visualisation library maintained by Uber
▪ open source
▪ HTML Tag-based creation of visualisations rather than
JavaScript DOM manipulation like in D3.js

11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11
March 18, 2021
Python
▪ Use Python in combination with a number of libraries
▪ NumPy: fundamental package for scientific computing
▪ pandas: data analysis and manipulation tool
▪ Matplotlib: library for creating static, animated and interactive
visualisations in Python
- Pyplot module offers a MATLAB-like interface
▪ Seaborn: data visualisation library with high-level interface
based on Matplotlib
▪ Altair: declarative visualisations in Python

12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12
March 18, 2021
Video: Python Seaborn Tutorial

13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13
March 18, 2021
Bokeh
▪ Interactive visualisation
library for Python
▪ export to HTML (allows
HTML/CSS customisation)
▪ Widgets as interactive
controls for a visualisation
▪ Tooltips to provide access to
the underlying data
▪ supports streaming data
(WebSockets)

14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14
March 18, 2021
Streamlit
▪ Interactive visualisation
library for Python
▪ easy formatting with
markdown
▪ very good for rapid
prototyping
▪ supports Matplotlib, Seaborn
and Altair visualisations
▪ supports streaming data
(WebSockets)

15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15
March 18, 2021
Leaflet
▪ JavaScript library for
interactive maps
▪ tiled maps
▪ supports display of data
layers (SVG) on top of
map tiles
- can be nicely combined with
D3.js and other frameworks
▪ smooth interaction on both
desktop and mobile devices

16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16
March 18, 2021
Deck.gl
▪ Large-scale open source
WebGL-powerered data
visualisation
▪ focuses on 3D map
visualisations
▪ support for streaming data
▪ cartographic projections
▪ Forms part of Vis.gl
frameworks by Uber

17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17
March 18, 2021
Tableau
▪ Business intelligence tool
for visual data analysis
▪ create interactive
dashboards
▪ deal with huge and fast-
changing datasets
▪ integration of files as well as
advanced database solutions
such as Hadoop, Amazon
AWS, MySQL or SAP

18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18
March 18, 2021
Video: What is Tableau?

19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19
March 18, 2021
Microsoft Power BI
▪ Business analysis tools
providing insights in an
organisation
▪ interactive visualisations and
business intelligence
capabilities
▪ enable end users to create
reports and dashboards
▪ Connect hundreds of data
sources
▪ cloud-based BI services
▪ Simplifies data prepara-
tion and instant analysis

20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20
March 18, 2021
Video: What is Power BI?

21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21
March 18, 2021
Google Charts
▪ Free data visualisation
tool for creating interactive
charts to be embedded on
websites
▪ output purely based on
HTML5 and SVG
▪ Integration of dynamic
data sources
▪ Possible to combine with
Google dashboards and
controls

22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22
March 18, 2021
Datawrapper
▪ Simple interface to upload
data and create visuali-
sations that can be
embedded elsewhere
▪ originally intended for
journalists
▪ end-user authoring without
programming
▪ export to PDF is also
supported

23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23
March 18, 2021
Infogram
▪ Web-based drag-and-drop
data visualisation and
infographics platform
▪ allows even non-designers to
create effective visualisations
▪ WYSIWYG infographics
editor
▪ around 40 different chart
types in free version
▪ Acquired by Prezi in 2017

24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24
March 18, 2021
Other Solutions
▪ There exist various other solutions
▪ FusionCharts
▪ Grafana
▪ Chartist.js
▪ ChartBlocks
▪ …

25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25
March 18, 2021
Exercise 6
▪ Hands-on Interactive Visualisation Frameworks

26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26
March 18, 2021
References
▪ The Grammar of Graphics (Statistics and
Computing), Leland Wilkinson,
Springer (2nd edition), July 2005,
ISBN-13: 978-0387245447
▪ Interactive Data Visualization for the Web: An
Introduction to Designing with D3, Scott Murray,
O'Reilly Media (2nd edition), August 2017,
ISBN-13: 978-1449339739
▪ Michael Bostock, Vadim Ogievetsky and Jeffrey Heer,
D3 Data-Driven Documents, IEEE Transactions on
Visualization and Computer Graphics 17(12), 2011
▪ https://doi.org/10.1109/TVCG.2011.185

27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27
March 18, 2021
References ...
▪ The R Project for Statistical Computing
▪ https://www.r-project.org
▪ R Cheat Sheets
▪ https://rstudio.com/resources/cheatsheets/
▪ ggplot2 Cheat Sheet
▪ https://rstudio.com/wp-content/uploads/2015/03/ggplot2-cheatsheet.pdf
▪ R Programming Tutorial
▪ https://www.youtube.com/watch?v=_V8eKsto3Ug
▪ Infogram
▪ https://infogram.com
▪ deck.gl
▪ https://deck.gl

28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28
March 18, 2021
References ...
▪ D3.js
▪ https://d3js.org
▪ NVD3 charting library
▪ http://nvd3.org
▪ Plotly Graphing Libraries
▪ https://plot.ly/javascript/
▪ Making a Bar Chart with D3.js and SVG
▪ https://www.youtube.com/watch?v=NlBt-7PuaLk
▪ Python
▪ https://www.python.org

29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29
March 18, 2021
References ...
▪ NumPy
▪ https://numpy.org
▪ pandas
▪ https://pandas.pydata.org
▪ Matplotlib
▪ https://matplotlib.org
▪ Seaborn
▪ https://seaborn.pydata.org
▪ Python Seaborn Tutorial
▪ https://www.youtube.com/watch?v=TLdXM0A7SR8

30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30
March 18, 2021
References ...
▪ Tableau
▪ https://www.tableau.com
▪ What is Tableau? A Tableau Overview
▪ https://www.youtube.com/watch?v=YfE9jBq002s
▪ Microsoft Power BI
▪ https://powerbi.microsoft.com
▪ What is Power PI?
▪ https://www.youtube.com/watch?v=yKTSLffVGbk
▪ Google Charts
▪ https://developers.google.com/chart

31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31
March 18, 2021
References ...
▪ Leaflet
▪ https://leafletjs.com
▪ Datawrapper
▪ https://www.datawrapper.de
▪ Bokeh
▪ https://docs.bokeh.org/en/latest/
▪ Streamlit
▪ https://docs.streamlit.io/en/stable/
▪ Dash
▪ https://dash.plotly.com

32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32
March 18, 2021
References ...
▪ Altair
▪ https://altair-viz.github.io
▪ React-Vis
▪ http://uber.github.io/react-vis/

33. 2 December 2005
Next Lecture
Design Guidelines and Principles