Fork of React & D3 Starter
This interactive React and D3.js visualization compares five encoding strategies for Texas weather data, from a simple position-only scatterplot to a fully repaired multivariate view. It demonstrates how hue, area, and shape channels alter readability, including a deliberately broken version that misuses sequential blues for categorical regions and maps a quantitative axis to symbol shapes. Built with React 19 and d3.v7, the chart uses `scaleLinear`, `scaleOrdinal`, `scaleSqrt`, and `scaleQuantize` APIs to render SVG marks, with tooltips and legend support. The interface lets users switch versions to inspect design choices and their consequences.
AI-generated descriptionHW5 - Marks and Channels
A React + D3.js visualization exploring different encoding strategies for multivariate data.
About
This project demonstrates five versions of the same dataset (Texas weather), each showing different design choices:
- V1: Position only (x, y)
- V2: Position + hue (categorical)
- V3: Position + hue + area
- V4: BROKEN - Shows common visualization mistakes
- V5: Repaired - Corrects the violations in V4
Components
Summary: Data overview and statisticsControls: Version selector buttonsCaption: Notes for each versionChart: Main D3 visualization
Data
Place texas_weather.csv in the project root.
Comments
Sign in to join the discussion.