Chained Transitions

100%

Chained Transitions

✓ Published0🌍 Public

Last edited Mar 23, 2017

Created on Mar 22, 2017

A small multiples chart compares daily temperatures in New York and San Francisco as a smooth line. Clicking a radio button switches the displayed city, triggering a three-stage chained transition: first the shared y-axis rescales to encompass both datasets, then the line and label morph to the new city with a color change, and finally the y-axis narrows to the new city’s range. Built with D3 v4, the visualization uses `transition()`, `axisBottom`, `axisLeft`, and `line()` to sequence these state changes smoothly.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3903818'>Chained Transitions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Chained Transitions

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.

Mmbostock

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

80% match

Loading thumbnail…

Difference Chart v4

Two lines trace daily average temperatures for New York and San Francisco from October 2011 to June 2012, with the area between them filled in green when New York is warmer and red when San Francisco is warmer. Built with D3 v4, the chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and SVG `clipPath` elements to alternate the fill color based on which city is hotter. The underlying data is loaded from a TSV file.

TThanaporn-sk

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

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

78% match

Loading thumbnail…

Multi-Series Line Chart

A multi-series line chart compares the daily average temperatures of New York, San Francisco, and Austin over a year. The visualization loads data from a TSV file using `d3.tsv`, parses dates with `d3.timeParse`, and encodes positions with `d3.scaleTime` and `d3.scaleLinear`. It renders colored lines via `d3.line` and `d3.schemeCategory10`. Interactive mouseover and click events highlight one city’s line while graying out others, using SVG transitions and class toggling for emphasis.

LLjfernando

78% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city represented by a distinct colored line. The visualization uses D3 v4’s SVG rendering, parsing a TSV file with `d3.tsv` and `d3.timeParse`. It encodes time on the x-axis via `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart includes interactive zooming through `d3.zoom` and clickable city labels that toggle line visibility.

CCatherine-Yu

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

77% match