87. D3 Resort

100%

✓ Published0🌍 Public

Last edited Feb 23, 2026

Created on Feb 23, 2026

Animated bar chart shows a dataset of 20 values as vertical bars that re-sort between ascending and descending order when clicked. Built with D3.js version 4.5.0, the SVG visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a transition with `duration(1000)` to animate bar repositioning. Each bar’s fill color is derived from its value via an RGB string, and click events toggle the `sortBars` function, which applies `d3.ascending` or `d3.descending` ordering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

85. D3 Sort

Animated bar chart displays 20 numeric values as vertical bars, color-coded by intensity, that rearrange into ascending order when clicked. Built with D3.js v4.5.0, the visualization uses `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for y-axis scaling. The code demonstrates sorting via `d3.ascending` comparator within a `sort()` method on rect elements, with mouseover highlighting and mouseout color transitions, all rendered as SVG with 1000ms transition animations.

Aamakanju@nyit.edu

88% match

Loading thumbnail…

88. D3 Delay

A bar chart displays a dataset of 20 values as vertical bars with numeric labels. Clicking any bar triggers a transition that re-sorts the bars by value, alternating between ascending and descending order. The animation uses `d3.ascending` and `d3.descending` with a `sort()` method, followed by a `transition()` that staggers each bar's horizontal movement using a `delay()` of 50 milliseconds per index and a duration of 1000 milliseconds. The SVG rectangles and text elements are rendered with D3 v4.5.0 scales, including `scaleBand` and `scaleLinear` for positioning and sizing.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

86. D3 Sort Hover

A bar chart displays 20 rectangular bars of varying heights, rendered in SVG with a blue gradient based on value, and white numeric labels above each bar. Clicking any bar triggers a transition that sorts all bars in ascending order by value over one second using `d3.ascending` and the `transition` API with `duration` and `attr` for repositioning. Hovering over a bar changes its fill to orange via CSS. The chart uses `d3.scaleBand` for x positioning and `d3.scaleLinear` for y scaling, with the dataset hardcoded in the code.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

80. D3 Click

A bar chart displays a dataset of 20 numeric values, rendered as blue SVG rectangles with white value labels. Each bar darkens as its value increases. When a user clicks any bar, the corresponding data value is logged to the browser's developer console. The visualization uses D3 v4.5.0, employing `d3.scaleBand` and `d3.scaleLinear` for positioning and height, with the click event handled via `.on("click", ...)`. The y-axis is implied through bar heights that grow from the bottom, and the chart is static apart from the logging interaction.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

84. D3 Smoother

A bar chart displays a dataset of 20 values as vertically oriented rectangles, with each bar labeled by its numerical value. Hovering over a bar immediately changes its fill color to orange, while moving the mouse away triggers a smooth 250-millisecond transition that gradually restores the original blue color. The visualization uses D3.js version 4.5.0, specifically `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and the `transition` method with a `duration` parameter to animate the color changes.

Aamakanju@nyit.edu

83% match

Loading thumbnail…

79. D3 Start

A static SVG bar chart displays a dataset of twenty numeric values, with each bar’s height and blue color intensity proportional to its value, and white value labels positioned atop each bar. The code uses D3 v4’s `scaleBand` and `scaleLinear` to map data indices to horizontal positions and values to bar heights, alongside `selectAll`, `data`, `enter`, and `append` to create the SVG rectangles and text elements. The visualization demonstrates a basic D3 bar-chart setup without animations or interactivity.

Aamakanju@nyit.edu

83% match

Loading thumbnail…

67. D3 Randomized Data

A bar chart displays 20 vertical bars whose heights and blue color intensities correspond to values in a static array. Clicking the text prompt replaces the dataset with 20 new random integers between 0 and 24, then animates the bars and their value labels using `transition` with `delay` and `duration`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG `rect` and `text` elements. Data is updated via a click handler on a paragraph element.

Aamakanju@nyit.edu

83% match

Loading thumbnail…

91. D3 SVG Tooltip

A bar chart of twenty values rendered as SVG rectangles uses D3.js version 4.5.0 to display a dynamic tooltip on mouseover. The tooltip is created by appending a text element to the SVG at the bar’s position, showing the data value, and removed on mouseout. Clicking a bar triggers a sorting animation using `transition().delay()` and `duration()` to reorder bars by value. Bars also change color to orange on hover via CSS.

Aamakanju@nyit.edu

82% match