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

Beat Signer - Department of Computer Science - [email protected] 2 March 21, 2024 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) ▪ …

Beat Signer - Department of Computer Science - [email protected] 3 March 21, 2024 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 ▪ implementation of Leland Wilkinson's Grammar of Graphics

Beat Signer - Department of Computer Science - [email protected] 4 March 21, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 5 March 21, 2024 Video: R Programming Tutorial

Beat Signer - Department of Computer Science - [email protected] 6 March 21, 2024 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)

Beat Signer - Department of Computer Science - [email protected] 7 March 21, 2024 Video: Introduction to Dash Plotly

Beat Signer - Department of Computer Science - [email protected] 8 March 21, 2024 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 as HTML5, SVG and CSS ▪ load data and bind it to elements within the document (DOM) ▪ transform elements based on visual properties

Beat Signer - Department of Computer Science - [email protected] 9 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 10 March 21, 2024 Video: Making a Bar Chart with D3.js

Beat Signer - Department of Computer Science - [email protected] 11 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 12 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 13 March 21, 2024 Video: Python Seaborn Tutorial

Beat Signer - Department of Computer Science - [email protected] 14 March 21, 2024 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)

Beat Signer - Department of Computer Science - [email protected] 15 March 21, 2024 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)

Beat Signer - Department of Computer Science - [email protected] 16 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 17 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 18 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 19 March 21, 2024 Video: What is Tableau?

Beat Signer - Department of Computer Science - [email protected] 20 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 21 March 21, 2024 Video: What is Power BI?

Beat Signer - Department of Computer Science - [email protected] 22 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 23 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 24 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 25 March 21, 2024 Other Solutions ▪ There exist various other solutions ▪ Shiny ▪ FusionCharts ▪ Grafana ▪ Chartist.js ▪ ChartBlocks ▪ …

Beat Signer - Department of Computer Science - [email protected] 26 March 21, 2024 Exercise 6 ▪ Hands-on Interactive Visualisation Frameworks

Beat Signer - Department of Computer Science - [email protected] 27 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 28 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 29 March 21, 2024 References ... ▪ deck.gl ▪ https://deck.gl ▪ 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

Beat Signer - Department of Computer Science - [email protected] 30 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 31 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 32 March 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 33 March 21, 2024 References ... ▪ Altair ▪ https://altair-viz.github.io ▪ React-Vis ▪ http://uber.github.io/react-vis/

2 December 2005 Next Lecture Design Guidelines and Principles