30:T5ab,Olá! My name is Sandra and I work with Dataviz in beautiful Lisbon 🙋🏼‍♀️. I'm a visual analyst and researcher with a passion for data storytelling 🔮 During my studies, I became fascinated by statistics and its power to uncover patterns in human behaviour and societies. After finishing my master's in economics in 2010, I worked for nearly a decade as a data analyst, designing statistical models for clients within media, consumer, and trend research. 👩‍💻👩‍💻👩‍💻 In 2015, I discovered the unique applications of data visualisation 🌈 , and ever since, I've been learning about new possibilities for exploring and representing data visually. Combining the two pillars: **statistics & dataviz** 💞, my motivation is to understand and democratise the complexity of our world through efficient and beautiful visual storytelling. I am available for freelance data visualisation work, please [contact me](mailto:sandrabeckerviz@gmail.com) in case you'd like me to help you with my experience and expertise You can also book [data viz related consultation](https://www.fiverr.com/sandraviz/provide-1-hour-of-d3js-consultation) session with me. Social media: [Linkedin](https://www.linkedin.com/in/sandradataviz/) | [Twitter](https://twitter.com/SandraCrypto) | [Youtube](https://www.youtube.com/playlist?list=PL53pYdoYDFiv2PFCiuXR53PZj9bZrZpyp) | [Observable](https://observablehq.com/@sandraviz?tab=profile) 31:T59b,### Data Visualisation Efficient pattern detection combined with logical interpretation is at the heart of visual data exploration. People with these skills are in high demand. Or, one could even claim that everyone participating in modern work settings, need to be able to “read” data. In this course the students learn the essence of data visualisation regarding its creation and evaluation. After completing this course the students will have a deep understanding of visual data literacy in oder to facilitate pattern detection and interpretation. - Presentation of the different visual encodings and their - Special focus on the usage of colour and position as visual encodings - Introduction to the basic rules of human perception and a collection of examples to understand their meaning for the creation of data visualisations - Presentation of user experience concepts in the context of data visualisation (chartjunk, outlier management, interactive design etc.) In these [videos](https://www.youtube.com/watch?v=0KTL2Ou4MxA&list=PL53pYdoYDFiv2PFCiuXR53PZj9bZrZpyp) I explain the usage of common data visualization types and present different projects. [link](https://slides.com/sandraviz/data-visualization)32:T5d3,### Visual data storytelling Data, data, data and even more data. How can we handle all this data, of course by analysing them but no program, software etc. can tell us the story, which is hidden in the data. The story is created by a human interaction with the data. In this process data visualisation is our friend as it helps us to discover patterns, outliers and everything we need to create the data story. At the same time data visualisation is a language we all understand and enjoy using, therefore it is the logical bridge between the data and the story. - Why and what is exactly visual storytelling? Introduction to the idea behind the visual storytelling, the different objectives and scenarios regarding audience. - How to create a good visual story? Presentation of the best practice regarding visual story creation and the common visual language techniques. - What are the different concepts for visual storytelling? Introduction to the author vs. viewer focus approach of visual storytelling concepts. Presentation of a collection of examples for the three different models within these two approaches. In 2017 I gave a [talk](https://cz.pycon.org/2017/speakers/detail/talk/19/) about visual storytelling at the PyCon in Prague. [link](https://slides.com/sandraviz/data-visualization) 33:T454,### Web-based Visualisations | d3.js D3.js is a library for data visualisation, which has since its invention by Mike Bostock at the NY Times Data Lab become the gold standard of data visualisation facilitation tools. The core paradigm of D3 is to bind data to Document Object Model (DOM) elements of a web page in order to drive the content and appearance of those elements: hence Data-Driven Documents! - Intro to HTML, CSS and JavaScript - Detailed introduction the coding philosophy of the javascript library D3 based on examples: Selections, data loading & binding, scales, axes and generators - Introduction to animation and interactivity options in order to create dynamic data representations using the library d3.js for examples transitions, buttons and tooltips I saved all the [examples](https://bl.ocks.org/sandravizz) from my teaching presentation on blockbuilder. [link](https://slides.com/sandraviz/d3-js) 34:T539,style = html``35:[{"id":"7234f31feb55d99a0cf345ed7ea5f052b2de1fb52efd62056b2eada855337370c107ce94a534b87811c32384acb7c2fc52971b818129b82f91260328506c8458","href":"https://static.observableusercontent.com/files/7234f31feb55d99a0cf345ed7ea5f052b2de1fb52efd62056b2eada855337370c107ce94a534b87811c32384acb7c2fc52971b818129b82f91260328506c8458","name":"ICH2.jpg","type":"image/jpeg","lastModified":1617874081482.482,"size":46611}] 2e:{"title":"SANDRAVIZ","cells":[{"id":1762,"value":"# SANDRAVIZ\n[Link](https://www.sandraviz.com/)\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1855,"value":"## D3.JS \n### Data Visualisations\n\nBelow I've listed a collection of d3.js data visualisations from simple to complex and static to dynamic. \n\nAll visualisations follow the concept of graphical excellence: \n\n*Which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.* \nEdward Tufte","pinned":false,"hidden":false,"mode":"md"},{"id":1518,"value":"animation = md`\n\n${previews(\n listings.map((d) => {\n return {\n path: \"@\" + d.creator.login + \"/\" + d.slug,\n thumbnail: d.thumbnail,\n author: d.creator.login\n };\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"## TEACHING","pinned":false,"hidden":false,"mode":"md"},{"id":1216,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1370,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1378,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1363,"value":"### Visual data science | R\n\nWhat is visual statistical analysis?\n\n- Introduction to the essentials of visually analysing data using R and in particular ggplot2.\n- Presentation of the concept \"grammar of graphics\", which allows to move beyond simple charts and gain insight into the deep structure that underlies statistical graphics in distribution and relationships\n- Introduction to time series visualizations and discussing a case study of a typical visual analysis flow within a data science project.\n\nIn these [videos](https://www.youtube.com/watch?v=RfM7bOp4Tkw&list=PL53pYdoYDFituLtrn3Sta1QME9Ew0gw3b) I explain how to create certain visualisations using R and also how to \"read\" patterns and gain insights from it. ","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"md` \n\n\n\n[link](https://slides.com/sandraviz/rggplot2)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"### MAPS & GEOVIZ | CARTO\n\n- Introduction to geo- dataviz using CARTO and cartographic principles\n- Explanation of styling rules and visual encodings when working with maps\n- Presentation of analysis show cases plus interactivity tools in CARTO\n\nSome of my [mapping examples](https://mappingspain.carto.com/u/sandrabecker/me) are visible on my CARTO account. \nIn these [videos](https://www.youtube.com/watch?v=RWhIQ6CJdPE&list=PL53pYdoYDFisElazJ1159gBbOtLrIg8cq) I present different use cases and how to create and interpret maps using CARTO.","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"md` \n\n\n\n[link](https://slides.com/sandraviz/carto)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1538,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"listings = collection.listings","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"collection = fetchp(\n \"https://api.observablehq.com/collection/@sandraviz/data-viz-projects\"\n).then(function (response) {\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"function previews(notebooks) {\n return html`

${notebooks.map(\n preview\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"function preview({path, title, author, thumbnail}) {\n return htl.html` event.currentTarget.firstElementChild.style.borderColor = \"#1b1e23\"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\"}>\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}