A11 Interaction

100%

A11 Interaction

✓ Published0🌍 Public

Last edited Apr 20, 2024

Created on Apr 20, 2024

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`.

AI-generated description

Meant to be viewed in full screen.

MIT Licensed

Similar vizzes

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

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

92% match

Loading thumbnail…

Interaction Visualization

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.

DDuc Pham

90% match

Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs

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

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

89% match

Loading thumbnail…

Multi-Series Line Chart V7

This interactive multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. It displays three color-coded temperature trends over time, with a legend for city selection. The visualization supports zooming and panning along the time axis, and users can click legend items to toggle the visibility of individual city lines. Hovering over a legend dims non-selected series. The code uses D3 v7 with `d3.scaleTime`, `d3.line` with `d3.curveBasis`, and an SVG rendering. It loads data from a TSV file and includes animation via D3's transition and zoom APIs.

Pprateekvasi

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

89% match