Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)

This lecture forms part of the course Information Visualisation given at the Vrije Universiteit Brussel.

Transcript

1. 2 December 2005 Information Visualisation Data Processing and Visualisation Frameworks Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2 March 19, 2026 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) ▪ … ▪ Tools vary from no-code to full programming libraries
3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3 March 19, 2026 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 (packages) ▪ graphical facilities for data analysis and display ▪ ggplot2 ▪ data visualisation package for R ▪ based on Leland Wilkinson's Grammar of Graphics ▪ supports declarative construction
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4 March 19, 2026 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 19, 2026 Video: R Programming Tutorial
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6 March 19, 2026 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 19, 2026 Video: Introduction to Dash Plotly
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8 March 19, 2026 D3.js: Data-Driven Documents ▪ Flexible JavaScript library combining powerful visualisa- tion components and data-driven DOM manipulation ▪ based on web standards such as HTML5, SVG and CSS ▪ load data and bind it to elements within the document (DOM) ▪ transform elements based on visual properties ▪ Ideal for highly custom, expressive visualisations
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9 March 19, 2026 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
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10 March 19, 2026 Video: Making a Bar Chart with D3.js
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11 March 19, 2026 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
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12 March 19, 2026 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 ▪ Vega-Altair: declarative visualisations in Python - based on Vega-Lite grammar ▪ Plotly/Dash ▪ Bokeh
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13 March 19, 2026 Video: Python Seaborn Tutorial
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14 March 19, 2026 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)
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15 March 19, 2026 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) Afbeelding met tekst Automatisch gegenereerde beschrijving
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16 March 19, 2026 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
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17 March 19, 2026 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
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18 March 19, 2026 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
19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19 March 19, 2026 Video: What is Tableau?
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20 March 19, 2026 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
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21 March 19, 2026 Video: What is Power BI?
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22 March 19, 2026 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
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23 March 19, 2026 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
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24 March 19, 2026 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
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25 March 19, 2026 Other Solutions ▪ There exist various other solutions ▪ Shiny ▪ FusionCharts ▪ Grafana ▪ Chartist.js ▪ ChartBlocks ▪ …
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26 March 19, 2026 Exercise 6 ▪ Hands-on Interactive Visualisation Frameworks
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27 March 19, 2026 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
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28 March 19, 2026 References ... ▪ The R Project for Statistical Computing ▪ https://www.r-project.org ▪ R Cheat Sheets ▪ https://rstudio.com/resources/cheatsheets/ ▪ ggplot2 Cheat Sheet ▪ https://raw.githubusercontent.com/rstudio/cheatsheets/main/data- visualization.pdf ▪ R Programming Tutorial ▪ https://www.youtube.com/watch?v=_V8eKsto3Ug ▪ Infogram ▪ https://infogram.com
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29 March 19, 2026 References ... ▪ deck.gl ▪ https://deck.gl ▪ D3.js ▪ https://d3js.org ▪ NVD3 charting library ▪ https://nvd3-community.github.io/nvd3/ ▪ 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
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30 March 19, 2026 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
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31 March 19, 2026 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
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32 March 19, 2026 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 ▪ https://www.youtube.com/watch?v=hSPmj7mK6ng
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33 March 19, 2026 References ... ▪ Vega-Altair ▪ https://altair-viz.github.io ▪ React-Vis ▪ http://uber.github.io/react-vis/
34. 2 December 2005 Next Lecture Design Guidelines and Principles