Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Beat Signer
PRO

March 24, 2022
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  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 - [email protected] 2

    March 24, 2022 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 - [email protected] 3

    March 24, 2022 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 - [email protected] 4

    March 24, 2022 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 - [email protected] 5

    March 24, 2022 Video: R Programming Tutorial
  6. Beat Signer - Department of Computer Science - [email protected] 6

    March 24, 2022 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 - [email protected] 7

    March 24, 2022 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 - [email protected] 8

    March 24, 2022 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 - [email protected] 9

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

    March 24, 2022 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 - [email protected] 11

    March 24, 2022 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 - [email protected] 12

    March 24, 2022 Video: Python Seaborn Tutorial
  13. Beat Signer - Department of Computer Science - [email protected] 13

    March 24, 2022 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 - [email protected] 14

    March 24, 2022 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 - [email protected] 15

    March 24, 2022 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 - [email protected] 16

    March 24, 2022 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 - [email protected] 17

    March 24, 2022 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 - [email protected] 18

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

    March 24, 2022 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 - [email protected] 20

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

    March 24, 2022 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 - [email protected] 22

    March 24, 2022 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 - [email protected] 23

    March 24, 2022 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 - [email protected] 24

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

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

    March 24, 2022 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 - [email protected] 27

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

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

    March 24, 2022 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 - [email protected] 30

    March 24, 2022 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 - [email protected] 31

    March 24, 2022 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 - [email protected] 32

    March 24, 2022 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