Skip to main content
SimilarExport ZIP
100%

Chained Transitions

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Oct 17, 2012

This example shows a line chart of daily temperatures for New York and San Francisco, with radio buttons to switch between the two cities. When a button is clicked, the line and its label first animate to the new data values, and then the y-axis rescales to fit the new range. Built with d3.v3, the SVG chart uses d3.time.scale, d3.scale.linear, d3.svg.line, and d3.svg.axis, and chains two d3 transitions to sequence the line movement and axis update.

AI-generated description

This variation of a line chart demonstrates a sequence of chained transitions. Clicking on the radio buttons changes the displayed metric. First, the line transitions to the new values. Then, the axes rescale to fit the new data.

gpl-3.0 Licensed

Similar vizzes

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
79% 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
78% 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
78% match
Loading thumbnail…

Linechart Version 2

This interactive visualization displays San Francisco weather data, letting users explore relationships between date, temperature, and other climate variables. The chart allows switching between line and area chart types, with dropdown menus for selecting x and y attributes. Built with React and D3 v5, it renders SVG paths using d3.line and d3.area, with smooth transitions via .attrTween and d3.interpolateArray. A tooltip appears on mouseover, showing precise inverted coordinate values via d3.mouse and scale.invert.

SSchmittYannic
78% 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
78% match
Loading thumbnail…

Linechart Version 1

This interactive visualization displays San Francisco weather data as either a line or area chart, with dropdown menus to select the variables for the x- and y-axes and a slider to adjust point opacity. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes. Animated transitions are implemented via `transition.attrTween` and `interpolateArray`, while mouseover events generate a tooltip. The line chart includes a stroke-dasharray drawing animation.

SSchmittYannic
77% 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
77% 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
77% match