Dive into a comprehensive tutorial series on mastering the Vega-Lite API for JavaScript within the Observable environment. Learn to create interactive visualizations from scratch, starting with a tree visualization in just 20 minutes. Explore JavaScript fundamentals for information visualization, Observable's unique features, and data file formats. Delve into advanced array operations, data manipulation techniques, and the setup of the Vega-Lite JavaScript API. Apply visualization theory to practice, create custom charts, and develop specific visualizations like donut charts, node-link networks, and geographical maps. Gain hands-on experience with color manipulation and tree visualization techniques using Vega-Lite API, D3, and Observable throughout this 3.5-hour learning journey.
Overview
Syllabus
W209 W1 2 ObservableHQ: From nothing to an interactive tree visualization in 20 mins.
W209 W1 4 Introduction to Vega-Lite for Observable.
W209 W2 1 Javascript Fundamentals for Information Visualization.
W209 W2 2 Introduction to Observable's not Javascript.
W209 W2 3 Data files for dataviz: JSON vs CSV.
W209 W2 4 Array operations, map, filter, reduce and above.
W209 W2 5 Nesting, Pivoting and Folding in JavaScript.
W209 W3 4 Setting up the Vega-lite Javascript API for Observable and beyond.
W209 W4 3 Translating marks and channels visualization theory to practice with the Vega-Lite JS API.
W209 W5 3 Vega-Lite API custom charts.
W209 W6 6 Creating a Donut Chart with Vega-Lite API.
W209 W8 2 Visualizing Node-Link Networks with Vega-Lite-API, D3 and Observable.
W209 W8 5 Working with color in Vega-Lite API.
W209 W9 2 Visualizing Trees with Vega-Lite API.
W209 W9 5 Using Vega-Lite for Maps and Geographical Data.
Taught by
John Alexis Guerra Gomez
