D3: Sorting and re-sorting visual elements with delay

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

86% match

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

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.

85% match

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.

Sortable Bar Chart

A bar chart displays 24 random values from a normal distribution, with bars sorted and animated into ascending or original order every five seconds. The reordering uses d3.transition with staggered delays per bar to make individual movements traceable, referencing Heer and Robertson’s animated transitions. Built with d3.js v3, the chart uses d3.scale.ordinal with rangeRoundBands for vertical positioning, while bar rectangles and text labels are rendered as SVG elements. The x-axis is drawn via d3.svg.axis, and sorting is triggered by a setInterval toggling the index order.

Mmbostock

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.

D3: A browser default tooltip

This example shows a bar chart where hovering over any bar triggers the browser's default tooltip to display the bar's value. Clicking on any bar alternates the sort order of the bars between ascending and descending, with a staggered animation that repositions each rectangle. The chart is built with D3 v4, using `d3.scaleBand` and `d3.scaleLinear` to map the array of twenty numbers to SVG rectangles. The animation relies on the `transition()` method, with `d3.ascending` and `d3.descending` comparators applied to the data on each sort.

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.

83% match

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.