This course aims to teach learners how to use the Vega-Lite API for JavaScript on Observable. By the end of the course, students will be able to create interactive visualizations, custom charts, donut charts, node-link networks, trees, maps, and geographical data using the Vega-Lite API. The course covers JavaScript fundamentals for information visualization, data file formats (JSON vs CSV), array operations, nesting, pivoting, folding, setting up the API, translating visualization theory to practice, working with color, and utilizing various visualization techniques. The teaching method involves hands-on coding exercises and practical projects. This course is intended for individuals interested in data visualization, JavaScript programming, and creating interactive visualizations for web applications.
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
