2c:null 2d:["$","title",null,{"children":"Observable IEEEVIS 2021 tutorial: Quick and Effective Visualization Prototyping with Reactive Notebooks | John Alexis Guerra Gómez | Observable"}] 32:T4ff,md`

Observable IEEEVIS 2021 tutorial:
Quick and Effective Visualization Prototyping with Reactive Notebooks

📆 Date: Monday, October 25: 8:00am-3:15pm Central Time (USA CDT, UTC-5) [Register for IEEEVIS 2021](http://ieeevis.org/year/2021/info/registration/conference-registration) to participate, __free__ for students!!! Also, inclusivity and diversity admisions available. All the sessions: Time | Session --- | -- 8:00 - 8:50 | [From zero to an interactive and customizable tree visualization in 20 minutes](#intro) 9:00 - 9:50 | [ Learning to think and code in a reactive way](#reactive) 10:00 - 10:50 | [Let's make a visualization for my paper](#paperViz) 11:00 - 11:50 | [I want to make a rich, interactive, multi faceted visualization, and share it.](#customViz) 12:00 - 13:00 | Lunch Break 13:00 - 13:50 | [Let's create custom made and interactive visualizations using D3](#d3Viz) 14:00 - 15:15 | [Teaching with Observable](#teaching) [About this tutorial](#about) ## Agenda `33:T776,intro = md` ## From zero to an interactive and customizable tree visualization in 20 minutes *For who*: You heard of Observable, but don't know why you should care __8:00 - 8:50__ In this session I'll try to show you why I think Observable is the best option for creating and sharing information visualizations in 2021. I'll give you a short demo creating a somewhat complex visual analytics application supporting: * An interactive tree visualization supporting treemap, sunburst, icicle, circular treemap and dendogram. * Visual and interactive filtering * Tabular representation * Load your own data in JSON, CSV, or JSONL (like the one used by mongoexport) * Choose what attributes to group by to build your tree. * Unique URL that I can share publicly with proper social media tags * Embedded on a standalone html page. * Versioning, forking, comments, collaborative editing and more. |Related resources | | -- | -- | | Observable reactiveness demo | | | Web Development basics for visualization with Observable| | | Observable tutorials |

https://observablehq.com/tutorials | _Break_ 8:50 - 9:00 `34:T6ed,reactive = md`## [Learning to think and code in a reactive way](https://observablehq.com/@john-guerra/learning-to-think-and-code-in-a-reactive-way) _For who:_ You are already impressed by what can be done, now you want to learn the basics of reactivity by creating interactive interfaces and loading your own data _9:00 - 9:50_ Objectives: * Understand reactive programming * Use interactive inputs * Loading data into notebooks * Importing from other notebooks _Reactive Notebooks_ What are reactive notebooks, and how they are different from Jupyter notebooks. We'll also cover interactive notebooks using standard HTML inputs _Importing and loading data_ How to load JavaScript libraries and speed up visualization creation by importing other modules. |Related resources | | -- | -- | | Web Development Basics for Visualization | | | JavaScript fundamentals for visualization with Observable | | | Observable's not JavaScript | | | Introduction to Imports | https://observablehq.com/@observablehq/introduction-to-imports | _Break_ 9:50 - 10:00 `35:Taa2,paperViz = md`## [Let's make a visualization for my paper](https://observablehq.com/@john-guerra/lets-make-a-visualization-for-my-paper) _For who:_ You are a researcher who wants to learn how to use observable to wrangle your data into the right format and quickly create meaningful visualizations for it. 10:00 - 10:50 _Objectives:_ * Quickly create simple visualizations from your data * Export your visualizations in SVG and PNG formats * Collaborate with your peers with comments, suggestions, forks and more * Keep the history of all your changes in pinnable versions * Wrangle your data into the right formats for a more advanced visualizations ### Vega-Lite Javascript API https://vega.github.io/vega-lite-api/. Now that you have your data on Observable, how to take the Marks and Channels visualization theory into practice with Vega-Lite API. ### Data processing with Arquero.js https://uwdata.github.io/arquero/. How to use transform your data to make it usable with your intended visualizations. |Related resources | | -- | -- | | Setting up Vega-Lite for Observable | | | Vega-Lite API Introduction for Observable | | | From Marks and Channels to Vega-Lite | | | Array operations | | | Nesting / Pivoting | | | Filtering Attributes and Values in Javascript | | _Break_ 10:50 - 11:00 `36:Tcdc,customViz = md`## [I want to make a rich, interactive, multi faceted visualization, and share it.](https://observablehq.com/@john-guerra/i-want-to-make-a-rich-interactive-multi-faceted-visualizati) _For who:_ Visualization researcher who wants to explore visually their data, and share it to the world. _11:00 - 11:50_ _Objectives:_ * Create multi view visualizations * Coordinate those multiple views with brush and linking * Summarize, explore and navigate your data * Collaborative explore your data * Comment, suggest, fork * Keep the provenance of your explorations with notebook versions Advanced Vega-Lite, how to use the interactive charts in vega-lite and use them to interact with other cells in your notebook. |Related resources | | -- | -- | | Vega-Lite API Custom Charts | | | Marks and Channels with Vega-Lite | | | Donut chart with Vega-Lite API | | | Temporal Visualizations with Vega-Lite API | | | Node Link Network Visualizations with Vega-Lite and D3 | | | Trees with Vega-Lite API | | | Maps with Vega-Lite API | | | Animations with Vega-Lite API | | | Faceting into multiple views with Vega-Lite API | | _Break_ 11:50 - 12:00 `37:Tce9,d3Viz = md`## [Let's create custom made and interactive visualizations using D3](https://observablehq.com/@john-guerra/lets-create-custom-made-and-interactive-visualizations-us) _ For who: _ Visualization researchers that want to create more complex systems and visualizations 13:00 - 13:50 For when you want to create more custom made or more advanced visualizations or reuse examples from the D3 community. _Objectives_ * Understand D3 inside Observable * Force Simulations and other concurrent processes * Building larger applications |Related resources | | -- | -- | _Break_ 13:50 - 14:00 |Related resources | | -- | -- | | Introduction to D3 in Observable | | | From Marks and Channels to D3 | | | D3 v6 Sections Explained | | | D3 Data Binding | | | D3 Step by Step Histogram | | | D3 Faceting | | | D3 Transitions and Animations | | | Networks with D3 | | | Trees with D3 | | | Maps with D3 | | _Break_ 12:50 - 13:00 `38:T7aa,md`## About this tutorial Creating custom made data visualizations tends to be an arduous and frustrating process. In the past, you were either forced to use commercial tools which offer a limited set of pre-designed visualizations, or you had to juggle the myriad of software required for setting up a local development environment. Then, after figuring that out and after choosing the perfect advanced visualization from the set of examples of the D3 or Vega library, you can spend days trying to apply them to your own data. And when you finally succeed, your next challenge will be to share it with your target audience. [Observable](https://observablehq.com) is a reactive and collaborative notebooks platform designed to alleviate many of these problems. It uses a new type of coding notebooks that are [reactive, reproducible and collaborative](https://www.nature.com/articles/d41586-021-01174-w), which seems to be particularly useful for learning, prototyping and teaching visualization. Users can get to work right away without having to install anything. They can also leverage the [wide amount of examples already available](https://observablehq.com/@d3/gallery), and with little effort modify them in-place, import or fork them for more custom made adaptations. The reactivity allows rich interactions, and even to allow the visualization users to [add their own data](https://observablehq.com/@john-guerra/umap-playground). In this tutorial I'll teach you how to go from the theory of data visualization into practice. You will learn how to reuse examples from the community to speed up the application of advanced visualization techniques with your own data. Moreover, you will be able to learn how to leverage reactive notebooks to move to the next step and created your own custom made visualizations. Finally, you will learn how to export your results, embed them on your own page or project and distribute it to your stakeholders or peers`39:[] 30:{"id":"89837c3793e726fd","slug":"observable-ieeevis-tutorial","title":"Observable IEEEVIS 2021 tutorial: Quick and Effective Visualization Prototyping with Reactive Notebooks","thumbnail":"2bc21a0a0d9f1aef25e7112c8dee2a409862409aa73750e50bc71c12f5aa6785","access_level":"public","create_time":"$D2021-10-15T13:44:25.491Z","update_time":"$D2022-04-11T16:23:40.062Z","view_time":null,"first_public_time":"$D2021-10-19T21:22:13.312Z","has_unpublished_edits":null,"fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":250,"publish_version":250,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[{"id":"baa2c4611152e374","reply_to_id":null,"content":"either the times on the agenda above or the times in the sections below aren't right, they don't line up","create_time":"$D2021-10-22T14:02:53.655Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ca9d2332808d4e71","login":"andyreagan","name":"Andy Reagan","avatar_url":"https://avatars-next.observableusercontent.com/ae4a0dadc2cad62edce830181acef0d692999eda9eeaa1d7b64740c51a058cb5","tier":null}},{"id":"f63fcd3acec6d722","reply_to_id":"baa2c4611152e374","content":"Thanks @Andy I think I fixed it now","create_time":"$D2021-10-22T16:47:12.331Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"0790790d65d985d4","slug":"observable-ieeevis-tutorial","title":"Observable IEEEVIS Tutorial","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"titling":"auto","title":"Observable IEEEVIS 2021 tutorial: Quick and Effective Visualization Prototyping with Reactive Notebooks","cells":[{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n\n## Teaching with Observable. \n_For who_: Visualization faculty, or teaching assistants who want to incorporate Observable into their curriculum\n\n_14:00 - 15:15_\n\n Observable has been used for teaching information visualization at UC Berkeley (Co designed between the Author and Andy Reagan) and at University of Washington (by Mike Freeman). This could be a section where instructors that have used the tool for teaching share their pros and cons.\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"