Description

Professor: Philip Bogden
Meeting time: TBD Location: TBD
Description
Web technologies provide increasingly sophisticated environments for visualizing data and communicating insights. This course uses some of the most advanced web technologies to introduce data-driven application development. The course builds from a series of case studies in data journalism and data science. These motivate the basics of user-interface design (interactive buttons, sliders, dropdowns, tables, etc.), which students will use to create interactive visualizations for exploring data and creating the types of displays found in businessintelligence dashboards. From these basics, the course will expand into areas such as cartography, animation, interactive algorithm visualization, and 3-D web mapping. Students will program in JavaScript and will learn to apply the languages and APIs of HTML5 (HTML, CSS, SVG, Canvas, WebGL). The course uses Observable notebooks to introduce technology fundamentals in an event-driven, reactive programming environment. The notebooks are also used to communicate ideas and develop applications with powerful open source libraries such as D3.js, Three.js, Leaflet.js, and deck.gl. The course covers best practices and collaborative techniques (e.g., forking, importing and adapting code) that are fundamental to the open-source software-development ecosystem. Students will create their own application as part of a term project, which can then become part of a project portfolio.
Some representative case studies
● America’s Cup (New York Times) — time-series animation for sailboat-racing fans
● Tensorflow playground — interactive deep learning in a browser
● Remarkable cartography — built with D3 Geo, a powerful API for geospatial analysis
● Brushable earthquakes — coupled D3 charts for exploratory data analysis
● Liquid Fun — fluid physics simulation in a browser
● deck.gl — 3-D mapping library for data visualization with WebGL
● vega — a grammar-of-graphics charting library built with D3
Prerequisites
Previous familiarity with the underlying web technologies will be helpful but is not required. Projects and assignments will introduce and use HTML5 (e.g., CSS, SVG, WebGL). Students with no background in these web standards will be expected to learn them along the way. Students will program in JavaScipt, the rapidly evolving language that is built into all modern browsers. While no previous experience with JavaScript is necessary, students must be proficient with object-oriented programming in at least one modern language, such as Python, C++ or Java.
Organization
Evaluation
● Short projects 50%
● Class Participation 20%
● Term Project 30%
Resources and textbook
● Most of the learning resources & examples will come from freely available content at https://observablehq.com.
● The Mozilla Development Network has become an authoritative resource for HTML5 technologies, with some excellent tutorials.