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.

1135dc242dcff3b90ae46fc586ff4da8?s=128

Beat Signer
PRO

March 18, 2021
Tweet

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 - 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