Interactive Data Visualization | Comp Sciences Dept

list Preamble

Course Title: Interactive Data Visualization (hcid 220P)
crn: 44262
Credits: 4
Prerequisites: hcid 110 (Foundations of Web Design and Development) and cs 275 (Introduction to Internet Programming) with a minimum grade of C (2.0 or better)
Lab fee: $50
Days: tbd
Time: tbd
Room: Charles A Dana Hall, 310B (map map) or virtual, via Teams
Dates: 25 August – 9 December 2025
Professor: Roy Vanegas (pronounced “vuh-nay-gus”) sound_detection_loud_sound
Email: vanegas at hartford dot edu
Phone: 860.768.5925
Office: Charles A Dana Hall, 310B
Office hours:
I meet students in my office by appt — via Compass — at the times noted below. (Meeting via videoconference is also an option.) If this time slot isn’t feasible, contact me on vanegas@hartford.edu to make an appt.
- Tuesdays: 12:00 – 3:00 pm

info Description

This course focuses on interactive visualization of qualitative and quantitative data. Particular emphasis is placed on mapping the unique properties of emerging data sources to animated or interactive environments. Topics covered include introductory data analysis involving domain, range and dimensionality. Additionally, students are exposed to a variety of publicly available data sets and learn to visually communicate through manipulation and assembly of scaled interactive environments. Discussion topics include data and visual complexity and constraints, spatio-temporal relationships and ethics.

list Learning Outcomes

Upon successful completion of this course, students will...

understand qualitative and quantitative data properties;
learn how to effectively map domain and ranges into visualized spaces;
understand common data access mechanisms, formats and limitations;
learn about normalization and imputation techniques for incorporating imperfect data sources;
and, understand how to evaluate the accuracy, clarity, integrity and impact of cross-domain data visualizations.

file_download Software Requirements

All the software required for this course is free and listed below.

Git Client (Mac, Windows, Linux)

All in-class examples, assignments, and help is done via GitHub. Download the client for your computer here.

Browsers (Mac and Windows)

Download all the browsers available at Browse Happy. Some students might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Firefox, Brave, and Chrome in class.

ESLint (Mac, Windows, Linux)

ESLint is a JavaScript code linter that will help to make sure your code is free of errors and bad practices. Note: Before proceeding, you must have installed Node and NPM.

Once installed, launch The Terminal and initiate the configuration process: eslint --init. Configure ESLint according to the following settings:

Node and Gulp

Download the latest stable release of Node from nodejs.org and follow the default instructions. Note: installing Node also installs NPM, which is needed to install Gulp.

With Node installed, type npm install --global gulp in your CLI, which, on a Mac, is The Terminal. If you get a write access error, precede the command with sudo by typing sudo npm install --global gulp. You’ll be asked for the current admin’s password.

Text Editor (Mac, Windows, Linux)

The code you write will require a text editor. Although there are many on the market, such as Sublime Text (nagware), for example, vs Code (open source) is the only editor supported in class. Download the Linux, Windows, or macOS version from https://code.visualstudio.com/.

EditorConfig (Mac, Windows, Linux)

EditorConfig is a tool that enforces consistent coding styles for everyone who works on a codebase. In our case, that codebase consists of all the examples in class and all the assignments you’ll submit throughout the semester. EditorConfig consists of an extension and a configuration file (.editorconfig) that goes in your home — or project — folder. Some editors and ides have EditorConfig built in. vs Code, unfortunately, is not one of them. Install the EditorConfig extension for vs Code from here, then download this .editorconfig file and place it in your home folder. Ensure the file name is exactly .editorconfig, starting with a dot and without a file extension.

Fonts (Mac, Windows, and Linux)

In addition to the stock issue, monospace/fixed-width fonts included with your os, here are a few more fonts to explore in your text editors:

IBM Plex | Ubuntu Mono | Fira Mono | Anonymous Pro | Inconsolata

A Command Line Interface (Mac, Windows, Linux)

Mac and Linux users do not have to install a Command Line Interface, or cli, because these operating systems already have The Terminal installed. Windows users, however, will need to install Cygwin, which is fully supported in class. Windows users may also consider installing the wsl.

Note: Once your cli has been installed, configure your environment using the Terminal-related config files from this repo.

menu_book Textbook

The textbook listed below is the only book used for this course. Ensure all the details match before making your purchase.

Textbook-related Info
Book Cover
Title	D3.js in Action
Edition	3
Authors	Elijah Meeks and Anne-Marie Dufour
isbn-13	9781633439177
Publisher	Manning

calendar_month Schedule

Important Notes

Time permitting, I will make every attempt to cover the topics listed below in order. However, depending on the cadence of the class, some topics may be overlooked.

Notable Dates

Monday, 25 August 2025 (Week 1) — First day of classes
Monday, 1 September 2025 (Week 2) — No class (Labor Day)
Friday, 31 October 2025 (Week 10) — Last day to change to pass/no pass, or vice versa; last day to withdraw with a grade of W
Monday, 24 November, and Wednesday, 26 November 2025 (Week 14) — No class (Thanksgiving recess)
Monday, 8 December 2025 (Week 16) — Last day of classes ^✶

^✶ Wednesday, 10 December 2025, is the last day of classes, but it’s Friday Fall Break Make-Up Day. This is the make-up date for Friday classes that were given a recess in October. Thus, our last day of class is Monday, 8 December.

The weekly schedule for the semester, complete with topics and readings.
Week	Topics	Homework
One	Thorough syllabus breakdown Revision control (Git) refresher Working with color Working with paths An introduction to D3.js	Download the textbook’s examples code (search page for Source code under resources) Clone our course’s examples repo
Two	A need for web-accessible data visualizations When do we use D3.js? How D3.js works html and the dom Scalable Vector Graphics	Read: 1.1 — What is D3.js? 1.2 — The D3 ecosystem: What you need to know to get started
Three	Canvas and Webgl css JavaScript Node and JavaScript frameworks Observable notebooks	Read 1.3 — Data visualization best practices
Four	Your first D3 visualization Preparing your environment The structure of our first D3 project Loading D3 into a project Selecting Elements Adding elements to a selection Setting and modifying attributes Setting and modifying styles	Read 2.1 – 2.6 — Manipulating the dom Programming assignment 1 due
Five	Understanding data Preparing data Binding data to dom elements Adopting data for the screen Adding labels to a chart	Read 3.1 – 3.5 — Working with Data
Six	Creating axes Drawing a line chart Drawing an area Drawing arcs	Read 4.1 – 4.4 — Drawing Lines, Curves, and Arcs
Seven	Creating pie and donut charts Stacking shapes Adding a legend to a project	Read 5.1 – 5.3 — Pie and Stack Layouts Programming assignment 2 due
Eight	Binning data Drawing a histogram Creating a pyramid chart Generating box plots Comparing distributions with violin plots	Read 6.1 – 6.5 — Visualizing Distributions
Nine	Why use interactivity? Filtering a visualization Revealing additional information with tooltips Animating the enter, update, and exit selections	Read 7.1 – 7.4 — Interactive Visualizations
Ten	Approaches to using D3 in a frontend framework Installing the D3 library in a React project Loading data into a React project A reusable approach to svg containers Allowing D3 to control a portion of the dom Using D3 as a utility library Hybrid approach	Read 8.1 – 8.7 — Integrating D3 in a Frontend Framework Programming assignment 3 due
Eleven	What is responsive design? A responsive line chart A responsive dashboard	Read 9.1 – 9.4 — Responsive Visualizations
Twelve	How people with disabilities access web content Meeting the accessibility standards	Read 10.1 – 10.2 — Accessible Visualizations
Thirteen	Geographical data Drawing a map from Geojson data Zooming and panning	Read 13.1 – 13.6 — Geospatial Information Visualizations Programming assignment 4 due Enjoy your break!
Fourteen	No class (Thanksgiving recess)	None
Fifteen	Adding a brushing functionality Drawing a map from Topojson data	None
Sixteen	Evaluations	Programming assignment 5 due Enjoy your break!

assignment Assignments

Note: Broken links in the list below will be updated once each assignment is assigned a due date.

info Grading

There are five programming assignments for this course, each worth twenty percent of your final grade:

Assignment I — 20%
Assignment II — 20%
Assignment III — 20%
Assignment IV — 20%
Assignment V — 20%

balance Class Policies

Consuming food in class. There is no eating inside our classroom, either during class or while on break. Eat before or after class. Drinks in covered containers, however, are allowed.
Digital devices. Silence your mobile devices before class starts.

psychology No AI Use in Class

The use of generative ai tools is strictly forbidden in this course. All programming assignments — and any labs — associated with this course must be completed without the assistance of ai-generated content. This policy is in place to ensure that the work submitted is authentically yours and reflects your personal understanding and capabilities. Violations of this policy will be considered academic dishonesty and will be subject to disciplinary actions as outlined in the university’s academic honesty policy.

warning Academic Honesty

Cheating of any kind will not be tolerated in this course; make certain that all the work you submit is your own. Refresh your understanding of the college’s policy on academic honesty.

accessible Students with Disabilities

If you have a documented disability for which you are requesting accommodation, you are encouraged to contact Access-Ability Services as soon as possible by calling 860.768.4312, emailing tlopez@hartford.edu, or by stopping by the Access-Ability Services office in Auerbach Hall, Room 209. If your request for accommodations is approved, an accommodation letter will be emailed to your instructor(s) upon your request. Please discuss your accommodations with the instructor as soon as possible to make appropriate arrangements. Note: Student requests for accommodations must be filed each semester. Visit https://www.hartford.edu/academics/academic-support/accessibility-services/ and click the “Registering” link for more info and a link to a video that walks you through the process.

balance Title IX and Sexual Assault

Sexual violence and other forms of sexual misconduct and harassment, including stalking and intimate partner violence, are prohibited under Title ix, federal and state law, and University of Hartford policy. Information on the University’s policies against sexual violence can be found at https://www.hartford.edu/about/policies/title-ix/. Resources regarding sexual violence can be found at https://www.hartford.edu/about/policies/title-ix/on-off-campus-resources.aspx

Note: University of Hartford faculty, staff, and ras are required to report incidents of sexual misconduct to the Title ix Office (title9@hartford.edu). For further information on The University’s policies and resources, please contact Jason Martinez (860.768.5255; jamartine@hartford.edu) or Justin Bell (860.768.4880; jbell@hartford.edu).

psychology Mental Health and Well-Being

Mental Health is an important aspect of students’ well-being and integral to positive academic experiences and success. If, during the semester, you experience difficulties and would like support, consider contacting the University of Hartford’s caps, or Counseling and Psychological Services, which offers a range of short-term counseling services available to full-time undergraduate students at no additional cost, and to part-time undergraduate and graduate students for a small fee.

caps is located in Gengras Student Union, Room 313 map, and can be reached by calling 860.768.4482 or emailing Liz Inkel at inkel@hartford.edu. Office hours are Monday – Friday, 8:30 AM – 4:30 PM.

info Advice on Succeeding in Class

Read over the following to understand procedures for maximizing your chances of succeeding in class.

Advice for Succeeding in Class (in pdf)
Advice for Succeeding in Class (in Markdown)

door_front Office Hours

I meet students in my office by appt — via Compass — at the times noted below. (Meeting via videoconference is also an option.) If this time slot isn’t feasible, contact me on vanegas@hartford.edu to make an appt.

Tuesdays: 12:00 – 3:00 pm

contact_mail Contact

Nowadays, I only use email for emergency situations, such as a pet emergencies, personal tragedies, etc. For matters related to our course, you’re advised to see me before or after class, during my office hours, or by appointment. My contact info is listed in the Preamble.