Interaction Visualization

100%

Interaction Visualization

✓ Published1🌍 Public

Last edited Apr 24, 2024

Created on Apr 23, 2024

This visualization displays daily temperature trends for New York, San Francisco, and Austin over several months, using colored multi-series line charts rendered with SVG and animation. The code employs D3 v7’s `d3.line`, `d3.scaleTime`, and `d3.scaleOrdinal` to map the tab-separated dataset, while hover and click interactions—implemented via mouse event handlers—temporarily gray out or hide individual city lines. Axes are generated with `d3.axisBottom` and `d3.axisLeft` to show dates and temperatures in Fahrenheit.

AI-generated description

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

Similar vizzes

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

93% 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

91% match

Loading thumbnail…

Untitled

This visualization displays daily temperature readings for New York, San Francisco, and Austin over a three-week period in October 2011. The code uses D3 v3 with SVG rendering to create smoothed line charts, with each city’s data series distinguished by color and labeled with a legend and endpoint text. The chart includes a time-scaled x-axis and linear y-axis labeled in Fahrenheit, with values parsed from a TSV data string embedded in the page. A mouse-over effects group is initialized but remains inactive in the rendered output.

Pperformautodev

90% match

Loading thumbnail…

A11 Interaction

This interactive line chart visualizes daily high temperatures for New York, San Francisco, and Austin from October 2011 to April 2012. Built with d3.v7, it renders SVG line graphs with a smooth basis curve. Users can hover over city labels to highlight a specific line, dimming others, and click to toggle a city's visibility. The chart also supports zooming on the time axis via the `d3.zoom` API, which rescales the x-scale and redraws the lines with the `d3.line` generator and `d3.curveBasis`.

EEric Yao

90% match

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

90% match

Loading thumbnail…

Untitled

This interactive multi-line chart displays daily temperature trends for New York, San Francisco, and Austin, with each city represented by a colored curve on a shared time axis. Hovering over a line highlights it in its original color while graying out the others, and clicking a line toggles its visibility. Built with D3 v6, the visualization uses SVG rendering with animated transitions, d3.axisBottom and d3.axisLeft for axes, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scaling. Data is loaded via d3.tsv from a remote source.

Hhollyjpotter

90% 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

89% match

Loading thumbnail…

Untitled

This interactive line chart compares daily high temperatures in New York, San Francisco, and Austin, with each city rendered as a steel-blue path. The chart uses D3.js v3 with `d3.time.scale` for the date axis and `d3.scale.linear` for the temperature axis, while `d3.interval` and `d3.svg.line` draw the smoothed curves. The data is embedded as a tab-separated string, parsed via `d3.tsv.parse`, and colors are assigned using `d3.scale.category10()`. A legend and mouse-over effects are included to highlight the selected city's values.

Ddanala0941

89% match