CS 5250: Data Visualization with Web Technologies

Course Description

Introduces techniques and web technologies for visually communicating insights derived from data. Focuses on developing apps using open-source libraries to explore and actively manipulate data through interactive data visualizations. The course emphasizes practical, real-world solutions using web technologies as a deployment platform for interactive data exploration, focusing on computational challenges such as efficiently rendering large datasets, coordinating multiple interactive views, and optimizing for real-time exploration. Students are encouraged to build on experiential projects and software repositories from other courses in order to create dynamic, interactive and web-accessible project portfolios.

Prerequisites: There are no formal prerequisites, but students must be comfortable with object-oriented and/or functional programming, command-line data management, git, SQL, and data access with web APIs (e.g., DS 5110). The course uses JavaScript and related web technologies; no previous experience required.

Course Learning Outcomes (CLOs)

At the end of this course, the student will be able to:

• Visually communicate insights derived from data
• Use web standards & open source libraries to create interactive data visualizations
  • Use Observable Plot, Vega-lite or other open source libraries for exploratory data analysis (EDA)
  • Use JavaScript, CSS and HTML and related frameworks to create custom apps for interactively visualizing and filtering data
  • Get exposed to advanced topics (D3.js, WebGL) for creating interactive charts, animations and mapping applications with code
  • Implement performance optimization strategies for data-heavy applications
• Deploy a website that can be used for a project portfolio
  • Add an interactive site to their project repositories (e.g., github pages)

Topics

Communication (core)

• Know your audience and your objective/message
• Organize data to enable focused explanation and/or interaction
• Distinguish technical vs. non-technical audiences (e.g., github pages)

Visualization grammars vs charting libraries (core)

• Basic chart design, best practices, chart libraries and their limitations
• Visualization grammars & extensibility (e.g., Vega-Lite vs Observable Plot)
• Wrapper libraries and their limitations (e.g., ggplot2/R, Altair/Python, Plotly)

Interaction (core)

• Interactive (event-driven) filtering and manipulation
• Programming with asynchronous APIs
• Related web standards: events, DOM, Promises

Data management and access for effective applications (core)

• Tidy, columnar and unstructured data
• Data manipulation: Arrays, Objects, Array methods, prototypes vs objects
• Data access and storage (fetch, JSON, PNG, TIFF)

Web technologies and standards/APIs (core)

• Basic data structures: vector, raster
• Related web APIs: SVG, Canvas
• Low-level APIs (e.g., vanilla JavaScript, D3.js)

Performance for data-heavy applications (core)

• Sampling strategies for large datasets, progressive rendering and data streaming
• Aggregation patterns (client vs. server) & trade-offs: computation location, memory, responsiveness
• WebGL for rendering millions of data points

Geospatial data and cartography (optional)

• Data storage formats (GeoJSON, TopoJSON, GeoTIFF)
• Vanilla libraries (e.g., D3.js, Plot, Leaflet)
• High performance WebGL libraries (e.g., MapLibre, Mapbox, Deck.gl)

Animation (optional)

• Algorithm visualization basics
• Interactive applications with animation
• Related web standards: Generators, event loop, DOM, requestAnimationFrame

Core topics will be covered in depth with assignments; optional topics introduce students to possibilities for their final projects.

Web technologies as visualization infrastructure

This course uses web technologies as a deployment platform for data visualization, not as an end in themselves. Students need working familiarity with the following to build interactive visualizations:

HTML/CSS for visualization layout (Week 1-2 scaffolding)

• Structuring visualization dashboards
• Responsive design for data displays
• CSS frameworks for rapid prototyping (Bootstrap, Tailwind)

JavaScript as a visualization language (integrated throughout)

• Event-driven interaction with data
• Asynchronous data loading
• DOM manipulation for dynamic charts

Development environment & tooling (integrated throughout)

• Front-end frameworks (e.g., Vite & Svelte, Observable Framework)
• Integrated data management and processing (e.g., cron, github actions)
• Deployment (e.g., github pages)

Students without prior web experience should expect 5-10 hours of self-study in weeks 1-2 using provided tutorials.

Example module structure

• Weeks 1-2: Foundations (web infrastructure & theory)
• Weeks 3-4: Declarative specs (charting libraries, grammar of graphics)
• Weeks 5-6: Interaction (event-driven architecture)
• Weeks 7-8: Performance
• Weeks 9-10: Custom visualizations (low-level APIs)
• Weeks 11-12: Optional topics (geospatial, animation)
• Weeks 13-14: Final project

Assessment

• Participation (20%): In-class critiques of visualization case studies, peer feedback on projects
• Homework (40%): 4-5 assignments building from exploratory charts → interactive filtering → custom visualizations → deployment
• Final Project (40%): Interactive data application of student’s choice, presented to class. Students are encouraged to enhance existing data science projects with interactive web visualizations.

Reading

• No required textbooks for the course; extensive use of online docs instead
• Web technologies, standards: MDN
• Frameworks, for example:
  • Observable Framework
  • Svelte
• Grammar-of-graphics inspired libraries, for example:
  • Observable Plot
  • Vega-lite