Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Assignment 8: Zoom and Pan (with filter and brushing)

Public visualization

Assignment 8: Zoom and Pan (with filter and brushing)

0 stars0🌍 Public
Aamrubal
Last edited Apr 4, 2022
Created on Apr 4, 2022
Forked from HTML Starter

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 description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed