VisML Lab Week 3

CS-GY 9223 - Fall 2025 - Perception and Color in Practice

Parikshit Solunke - Teaching Assistant

NYU Tandon School of Engineering

2025-09-15

Lab Overview

Today’s Topics: - Intro to D3 - Hands-on exploration of perceptual principles - Creating effective color palettes - Using ColorBrewer and accessibility tools

Agenda

  1. Intro to D3 and SVG (20 min)

  2. Working with color and accesssibility (20 min)

    • Building color scales
    • ColorBrewer tutorial
    • Color blindness simulators
    • Contrast checking tools

  3. Hands-on Exercise (40 min)

    • Apply principles to create a visualization

Part 1: Intro to D3 and SVG

Let’s complete this workbook to get a feel for D3

// Observable notebook link
// https://observablehq.com/d/312fbde1be6913c9

Part 2: Color, Clarity, and Aesthetics

Let’s go over some basics about optimising color and clarity

// Observable notebook link
// https://observablehq.com/d/60ae70bf32574aed

ColorBrewer Tool

Visit: colorbrewer2.org

Key Features: - Data classes: 3-12 levels - Nature of data: Sequential, Diverging, Qualitative - Colorblind safe options - Print friendly options - Photocopy safe options

** Recommended Practice 3:** 1. Create a 5-class sequential scheme for temperature data 2. Create a diverging scheme for election results 3. Create a categorical scheme for 7 different categories

Accessibility Tools

Color Vision Deficiency Simulators

Tools to test your visualizations: - Coblis - Color Blindness Simulator - Sim Daltonism (Mac app) - Chrome DevTools (Rendering tab → Emulate vision deficiencies)

Contrast Checkers

WCAG Guidelines: - Normal text: 4.5:1 contrast ratio - Large text: 3:1 contrast ratio - Graphics: 3:1 contrast ratio

Sequential Scales

Best for ordered data from low to high

// D3 sequential color scales
const colorScale = d3.scaleSequential()
  .domain([0, 100])
  .interpolator(d3.interpolateBlues);

Diverging Scales

Best for data with meaningful midpoint

// D3 diverging color scales
const colorScale = d3.scaleDiverging()
  .domain([-50, 0, 50])
  .interpolator(d3.interpolateRdBu);

Categorical Scales

Best for nominal/categorical data

// D3 categorical color scales
const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C", "D"])
  .range(d3.schemeCategory10);

Part 3: Hands-on Exercise with D3

Fork and complete the notebook linked here

Key Takeaways

✅ Perception Principles: - Use position when accuracy matters most - Leverage pre-attentive features for important data - Apply Gestalt principles for grouping

✅ Color Best Practices: - Match color scale to data type - Always test for accessibility - Limit categorical colors to ~7

✅ Accessibility: - 8-10% of males have color vision deficiency - Always provide redundant encodings - Test contrast ratios

Resources

Perception: - Ware - Information Visualization: Perception for Design - Cleveland & McGill Paper

Color: - ColorBrewer - D3 Color Schemes - Datawrapper Color Palette Guide

Accessibility: - WCAG Guidelines - Inclusive Design Principles

Next Week Preview

Week 4: Model Assessment and Performance Metrics - Confusion matrices visualization - ROC curves - Performance dashboards

Preparation: - Review basic ML metrics - Install scikit-learn if not already installed

Questions & Office Hours

TA Office Hours: TBD (will announce on Discord)

Contact: Parikshit Solunke - pss442@nyu.edu

Discord: Please post questions in #week3-lab channel