Skip to main content
SimilarExport ZIP
100%

Interaction

✓ Published0🌍 Public
PPranay Matalia
Last edited Apr 5, 2022
Created on Apr 5, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

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…

interactions

This example shows temperature trends for New York, San Francisco, and Austin over several months, rendered as smooth, animated lines using D3.js v7. SVG paths represent each city’s time series, color-coded via a categorical scale. The visualization supports mouse interactions: hovering a city name highlights its line and dims others, while clicking toggles visibility. A zoom feature, powered by `d3.zoom`, rescales the x-axis to focus on date ranges, with brushed panning enabled. Data is loaded from a tab-separated file and parsed with `d3.timeParse`.

AAllen Ho
91% match
Loading thumbnail…

Interactions

This example shows a multi-series line chart of daily temperatures for New York, San Francisco, and Austin, with two interactive features. Hovering over a city’s label highlights its line by increasing stroke width and graying out the others, while clicking the label toggles that city’s line visibility. The visualization uses d3.line with curveBasis to draw smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.schemeCategory10 for colors. Data is loaded as a TSV file via d3.tsv, and all rendering is done in SVG.

OOlha
89% match
Loading thumbnail…

D3 Interaction

This example shows an interactive multi-series line chart of average temperatures in New York, San Francisco, and Austin from October 2011 through April 2012, loaded from a TSV file. Using d3.tsv and D3’s time scale, the code renders three colored temperature curves with SVG paths and a basis curve interpolation. Users can hover over the chart to highlight one city’s line while dimming others, or click a line to toggle its visibility. Interactions rely on event handlers and D3 selection methods, with a `d3.axisBottom` and linear y-scale providing the axes.

Mmariahdiaz
88% match
Loading thumbnail…

CS 360 A8: Interaction in D3

This interactive line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city represented by a colored line. Users can hover over a line to highlight it while greying out the others, or click a line to toggle its visibility. The visualization uses D3 v7 with SVG rendering, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. Interactions are implemented through mouseover, mouseout, and click event handlers that manipulate stroke colors and visibility attributes.

SSean Sanchez
88% 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
86% match
Loading thumbnail…

Assignment11 Interactions

This example presents three temperature time-series lines for New York, San Francisco, and Austin, loaded as TSV data and rendered as SVG paths with a basis curve. It uses D3 v7 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisBottom`, `d3.axisLeft`). Users can hover over city labels to dim non-matching lines, click to toggle each line’s visibility, and reorder lines by hovering. The visualization demonstrates interactive selection, filtering, and layering through D3 selections and style manipulation.

Aahuynh8@dons.usfca.edu
85% match
Loading thumbnail…

A7 - Interaction in D3

This example shows daily average temperatures for New York, San Francisco, and Austin plotted as smooth line charts over time. Users can hover over lines to reduce their opacity, click a line or label to remove that city from the chart, and zoom the time axis using the mouse wheel. The visualization is built with D3 v7, loading data from a TSV file, using `d3.line` with `curveBasis`, `d3.scaleTime`, and `d3.zoom`, and rendering to SVG with animated transitions.

SSimon Hackbert
85% match