D3: A chart transition with controlled duration (labels, too!)

100%

D3: A chart transition with controlled duration (labels, too!)

✓ Published0🌍 Public

Last edited Aug 1, 2016

Created on Jul 30, 2016

This example demonstrates a bar chart whose values, bar heights, colors, and labels all animate over five seconds after a user clicks the accompanying text. The chart initially displays a set of twenty numeric values as SVG rectangles, with corresponding white text labels positioned above each bar. The code uses D3 v4’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `transition().duration()` method to smoothly interpolate the `y`, `height`, `fill`, and label text attributes when new data is applied. The dataset is a hardcoded array of numbers, rendered entirely via SVG elements.

AI-generated description

Built with blockbuilder.org

This is an example copied from Interactive Data Visualization for the web.

I updated it with d3.v4.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3: A bar chart that transitions to new data!

A bar chart of 20 static values transitions to a new dataset when the user clicks a text prompt. Built with D3 v4, the visualization uses SVG rectangles and text labels, scaled by `d3.scaleBand` and `d3.scaleLinear`. Clicking triggers a `transition()` on both the bars and labels, animating their `y`, `height`, `x`, and fill color (a blue scale based on each value) to reflect the shuffled data order.

深深度碎片

89% match

Loading thumbnail…

D3: Adding values and elements to a chart

A bar chart displays a fixed dataset of 20 values as blue rectangles with white value labels, using D3 v4 scales (`scaleBand` and `scaleLinear`) and SVG rendering. Clicking the text above the chart triggers a transition: a random number between 0 and 25 is appended to the data array, the scales’ domains are recalculated, and both bars and labels animate over one second via `transition()` and `merge()` to accommodate the new element with a slightly narrower band width.

深深度碎片

87% match

Loading thumbnail…

D3: Transitioning to randomized data values

This example shows a bar chart with value labels that randomize each time the user clicks on the text prompt above it. Initially, a fixed dataset of twenty values is rendered as SVG rectangles with a blue color scale and overlaid text labels. Upon clicking, the D3 transition API animates each bar's new height, fill color, and label position with a staggered delay based on its index, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The original code was adapted from the book *Interactive Data Visualization for the Web* and updated to work with d3.v4.

深深度碎片

87% match

Loading thumbnail…

D3: Smoother highlight transitions

A bar chart displays a static series of twenty numerical values, rendered as SVG rectangles. On mouseover, the individual bar's fill immediately changes to orange, and on mouseout, it smoothly transitions back to its original blue shade over 250 milliseconds using D3 v4's `.transition()` method. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with each bar labeled by its value via text elements that have pointer-events disabled.

深深度碎片

87% match

Loading thumbnail…

D3: Adding values and elements to a chart

This example shows a bar chart that grows dynamically as users click a text prompt, adding a new randomly generated value between 0 and 25 to the existing dataset. Each bar is labeled with its corresponding value, rendered as white text directly on the bar. The chart uses D3 v4’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with SVG `rect` and `text` elements. Clicking triggers D3’s `.transition()` API to animate the bars and labels, smoothly repositioning and resizing them as the domain and axes update.

深深度碎片

86% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

85% match

Loading thumbnail…

D3: Adding and removing values from a chart (dynamic labels included)

This example shows a bar chart where clicking the “Add” or “Remove” text buttons appends or removes a data value, with bars and their numeric labels animating to updated positions. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, a key function on `d.key` for data binding, and `selection.merge` with `transition` to smoothly shift rectangles and text over 500 milliseconds. Entering elements slide in from the right, while exiting ones slide out left before being removed.

深深度碎片

84% match

Loading thumbnail…

D3: Adding values and elements to a chart

This example demonstrates an interactive bar chart that starts with 20 values and adds a randomly generated data point each time the user clicks the text prompt. The visualization shows a static bar chart with data labels, and the interactive element updates both the chart's scales and geometry. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` to manage axes, and `transition` to animate the repositioning and resizing of rectangles and text elements over 500 milliseconds. The data is an inline JavaScript array, rendered as SVG.

深深度碎片

83% match