[A11] Starter Chart (Brushing, Filtering, and Zoom/Pan)

100%

[A11] Starter Chart (Brushing, Filtering, and Zoom/Pan)

✓ Published0🌍 Public

Cctan13@dons.usfca.edu

Last edited Apr 19, 2024

Created on Apr 19, 2024

This example shows interactive multi-series line charts of daily temperatures in New York, San Francisco, and Austin, loaded from a TSV file. Users can brush to zoom and pan along the time axis, click a city’s line to toggle its visibility, and hover to highlight a specific series. Built with React and D3 v7, it uses `d3.zoom` for scaling and translation, `d3.axisBottom` for time-axis updates, and `d3.curveBasis` for smooth line rendering in SVG with animation transitions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

A11 Interaction

This example displays interactive multi-line charts of daily temperatures for New York, San Francisco, and Austin, based on a TSV data file. Users can zoom and pan the time axis using d3.zoom, and hover to highlight a city’s line while dimming others. Clicking a legend-like label toggles the visibility of that city’s line. The visualization is built with React, d3.v7, SVG, and animated transitions, using d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal.

AAllen Jake Polintan

91% match

Loading thumbnail…

A11 - Interaction in D3

This interactive multi-series line chart shows daily temperature trends for New York, San Francisco, and Austin, rendered as SVG paths with distinct colors. The visualization supports pan and zoom through d3.zoom, with a rescaleX transform that dynamically updates the x-axis and redraws each line using d3.line with curveBasis smoothing. Hovering highlights a city’s label and line via CSS classes that increase stroke width and reduce opacity of other lines. Data is loaded from a TSV file using d3.tsv, with time parsed via d3.timeParse and scales defined by d3.scaleTime and d3.scaleLinear.

RRiya Mathur

89% match

Loading thumbnail…

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.

Aamrubal

87% match

Loading thumbnail…

A11 - Interaction

This example shows a multi-series line chart of daily temperatures for New York, San Francisco, and Austin, rendered as SVG using D3 v7. It demonstrates interaction: hovering over a line highlights it in color while others fade to light grey, and clicking toggles a line’s visibility. The data is loaded from a TSV file and parsed with `d3.timeParse`. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `d3.curveBasis`, and `d3.axisBottom`/`d3.axisLeft` for axes, with CSS transitions on stroke styling.

CChandana Srinivas

87% match

Loading thumbnail…

A11

This example shows monthly temperature trends for New York, San Francisco, and Austin, with each city represented by a colored line on a time-series chart. Users can click city labels to toggle line visibility and hover over them to highlight the corresponding line. Built with D3 v7 in a React environment, it loads TSV data from a GitHub gist and uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, d3.axisBottom, d3.axisLeft, and d3.zoom for interactive panning and scaling. SVG rendering handles paths and text labels.

SShazil Taqi

87% match

Loading thumbnail…

Filtering and Brushing - Multi-Series Line Chart

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Users can click a city’s line to isolate it by fading others, or hover to gray out the remaining lines. Built with D3 v4, it uses `d3.tsv`, `d3.timeParse`, scales like `d3.scaleTime` and `d3.scaleLinear`, and `d3.line` for SVG paths. Color encoding relies on `d3.scaleOrdinal` with `d3.schemeCategory10`, while transitions animate opacity and stroke changes.

115Dkatz

86% match

Loading thumbnail…

Interaction

This example demonstrates interactive multi-series time-series data visualization, showing temperature trends for New York, San Francisco, and Austin. Users can hover to highlight a specific line, click to toggle its visibility, and zoom along the x-axis using d3.zoom with rescaleX. Rendering uses SVG with d3.line and curveBasis, while the data loads from a TSV file parsed via d3.tsv and d3.timeParse. Styling applies CSS stroke properties, and the React framework supports the interaction handling.

PPranay Matalia

86% match

Loading thumbnail…

Untitled

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth, colored path. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for positioning, and d3.line with curveBasis for the paths. Interactive labels trigger hover and click handlers that highlight or toggle the visibility of each city’s line using d3 selection styling. A d3.zoom behavior is applied to the SVG, though its zoom event handler remains empty.

Ddonaldminer

85% match