Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

86. D3 Sort Hover

Public visualization

86. D3 Sort Hover

0 stars0🌍 Public
Aamakanju@nyit.edu
Last edited Feb 23, 2026
Created on Feb 23, 2026

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.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed