Special Topics in Data Science – Fall 2022

Cutting-edge data visualization with web technologies

This course introduces advanced web technologies for visualizing and communicating insights with data. Students will learn to create custom interactive visualizations. We’ll explore a series of case studies ranging from data journalism to data science. With a combination of in-class exercises and outside assignments, students will gain experience with the basics of user-interface design (interactive elements such as sliders, brushes, buttons, etc.) and interactive exploratory data analysis with cartography, animation, 3-D graphics, and dashboards.

The course uses Observable notebooks – a transformative new technology for event-driven, reactive programming. These notebooks provide a flexible medium for communicating ideas and developing applications with powerful open source libraries. Students will program in JavaScript as they learn to apply the various technologies of HTML5, including CSS, SVG, Canvas and WebGL. Students will gain experience with the best practices and techniques of collaborative coding (e.g., forking, importing, recommending, version control). Project-based learning will allow students to gain experience working in a team. And a term project will provide students with an opportunity to explore their passions and to start/advance their own portfolio website.

Some representative case studies:

• America’s Cup (New York Times) – time-series animation for sailboat-racing fans
• Tensorflow playground – neural network in a browser
• Remarkable cartography – built with D3’s geospatial capabilities
• Brushable earthquakes – interactive visualizations 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

Learning outcomes

Students will learn innovative data visualization skills that can be applied in a wide range of application areas. These skills bridge the gap between data science and web development. By the end of the course, students will be able to…

• Create interactive visualizations with modern web technologies,
• Tell a story with data and animate an algorithm,
• Create dashboards with a variety of chart types using open source software libraries,
• Perform browser-based data exploration in a collaborative development environment,
• Develop browser-based geospatial mapping applications,
• Apply cutting-edge 2-D and 3-D libraries such as D3, Observable Plot, Three.js, MapLibre, Deck.gl,
• Gain a practical perspective on business models of software platforms such as Mapbox, Plotly and Tableau,
• Deploy and maintain a website that can be part of their own data-driven project portfolio.

Approach

• Classes
  • The majority of the class time will involve hands-on exercises with live coding.
  • For the most part, outside reading and videos will take the place of in-class lectures.
• Assignments
  • Reading, videos and homework assignments will expose students to ideas and technologies.
  • Observable notebooks will be used for both individual and team-based learning.
• Participation
  • Students are expected to participate in class, through assignments and self-motivated exploration.
  • Students should have a github account, which they’ll use to authenticate at observablehq.com.
• Term project
  • Term projects comprise an important part of the course and will dominate the second half of the semester.
  • Students may select from project options presented in class or they may choose their own path.

Prerequisites

There are no formal requirements. The course uses JavaScript, which is the rapidly evolving language that’s built into all modern browsers. While no previous experience with JavaScript is necessary, students should be proficient with object-oriented programming in at least one modern language such as Python, C++ or Java. Previous familiarity with the underlying web technologies will be helpful but is not required. Projects and assignments will introduce and use the technologies of HTML5 (e.g., JavaScript, CSS, SVG, WebGL). Students with no background in these web standards will be expected to learn them along the way.