## 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 ```javascript // Observable notebook link // https://observablehq.com/d/f2a92188982f2ba8 ``` --- ## Part 2: Color, Clarity, and Aesthetics Let's go over some basics about optimising color and clarity ```javascript // Observable notebook link // https://observablehq.com/d/60ae70bf32574aed ``` --- ## ColorBrewer Tool Visit: [colorbrewer2.org](https://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](https://www.color-blindness.com/coblis-color-blindness-simulator/) - [Sim Daltonism](https://michelf.ca/projects/sim-daltonism/) (Mac app) - Chrome DevTools (Rendering tab → Emulate vision deficiencies) ### Contrast Checkers - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - [Accessible Colors](https://accessible-colors.com) **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 ```javascript // D3 sequential color scales const colorScale = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateBlues); ``` ### Diverging Scales Best for data with meaningful midpoint ```javascript // D3 diverging color scales const colorScale = d3.scaleDiverging() .domain([-50, 0, 50]) .interpolator(d3.interpolateRdBu); ``` ### Categorical Scales Best for nominal/categorical data ```javascript // 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](https://observablehq.com/d/312fbde1be6913c9) ## 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](https://www.elsevier.com/books/information-visualization/ware/978-0-12-812875-6) - [Cleveland & McGill Paper](https://www.jstor.org/stable/2288400) **Color:** - [ColorBrewer](https://colorbrewer2.org) - [D3 Color Schemes](https://github.com/d3/d3-scale-chromatic) - [Datawrapper Color Palette Guide](https://blog.datawrapper.de/colorpalettes/) **Accessibility:** - [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - [Inclusive Design Principles](https://inclusivedesignprinciples.org) --- ## 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 **Instructor Office Hours:** Fridays 1:30-2:30 PM, 370 Jay Street, Room 1153 **TA Office Hours:** TBD (will announce on Discord) **Contact:** Parikshit Solunke - pss442@nyu.edu **Discord:** Please post questions in #week3-lab channel 