86. D3 Sort Hover

81. D3 Hover

A simple bar chart displays twenty numeric values as vertical bars, with each bar labeled by its value and colored in a blue gradient. The example demonstrates a CSS-only hover effect, where hovering over any rectangle turns it orange. Built with D3.js version 4.5.0, the code uses `d3.scaleBand` to position bars along the x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` and `text` elements for rendering, with hover styling defined via CSS `:hover` selector.

91% match

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.

90% match

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.

87% match

92. D3 DIV Tooltip

This example demonstrates an interactive bar chart with a hover tooltip. It shows a dataset of 20 numeric values represented as vertical bars, where hovering over a bar reveals its value in an HTML tooltip that follows the cursor. Clicking a bar triggers a sorting animation, alternating between ascending and descending order. The visualization uses D3.js v4.5.0 with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rect elements. The tooltip is positioned absolutely and updated on mouseover events.

86% match

90. D3 Browser Tooltip Text

A bar chart displays a dataset of 20 values as clickable, blue-tinted rectangles. Clicking a bar sorts the bars in either ascending or descending order, with a staggered transition that animates each bar to its new position over one second. The chart is rendered with SVG and uses D3 v4.5.0, specifically `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.ascending`/`d3.descending` for sorting. A native browser tooltip appears on hover, showing each bar's value via an appended `title` element. The bars also change color to orange on mouseover.

87. D3 Resort

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.

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.

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.

深深度碎片