Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
0 likes112 views
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.
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
- 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