🌍 Public
Assignment 8: Zoom and Pan (with filter and brushing)
This interactive visualization displays daily temperature readings for New York, San Francisco, and Austin across two years, rendered as multi-colored lines on a time-series chart. Users can zoom and pan along the time axis via mouse interactions, while clicking a city’s label toggles its line’s visibility and hovering temporarily grays out non-targeted lines. The code uses D3 v7’s `d3.zoom`, `d3.axisBottom`, and `d3.line` with basis curves, extracting data from a TSV file. React and SVG provide the framework and rendering, with CSS styling for lines and axes.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed


![[A11] Starter Chart (Brushing, Filtering, and Zoom/Pan)](/viz/71dee7ada9f54f208fb5a2200b78bb10/social-image.png?v=fdac9e1a63d1494fa233f0ae6014863d)





Comments
Sign in to join the discussion.