84. D3 Smoother

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.

深深度碎片

88% match

62. D3 Ease Bounce

A bar chart displays twenty numeric values, with bars colored by value in shades of blue and labeled with their data values. Clicking the text updates the dataset to a new sequence of values, triggering a transition that animates the bars' heights, positions, and labels over two seconds. The animation uses D3 v4's `d3.easeBounceOut` easing function to create a bouncing effect as the bars settle into their new sizes. The visualization is rendered with SVG elements created via `d3.select`, `append`, and scale functions `d3.scaleBand` and `d3.scaleLinear`.

86% match

59. D3 Ease Linear

A bar chart displays a dataset of 20 values, initially rendered in blue. Clicking a text prompt triggers a 2-second transition where the bars' heights, positions, and labels animate to a new dataset. The animation uses `d3.transition()` with `.duration(2000)` and `.ease(d3.easeLinear)`, demonstrating linear easing. The SVG elements are created programmatically, with bar positions scaled via `d3.scaleBand()` and `d3.scaleLinear()`, and label positions updated alongside the rectangles.

86% match

55. D3 Transition

A bar chart demonstrates smooth animated transitions between two datasets using D3 v4. The initial bars and value labels render with SVG elements, scaled via `d3.scaleBand` and `d3.scaleLinear`. Clicking a text paragraph triggers a `.transition()` on all rectangles, interpolating their height, y-position, and fill color to match the new values. The labels also update their positions and text content within the same interaction.

28. D3 Bar Chart Blues

A bar chart displays a fixed dataset of 20 numeric values in a viewport 500 pixels wide and 100 pixels high. Each bar’s height is proportional to the data value, scaled by a factor of four, and its horizontal position is computed from the array index and overall width. The bars are rendered as SVG rectangles using the D3.js v4.5.0 library, with a dynamic fill color that transitions from dark to lighter blue based on the data value. This example demonstrates simple data-driven styling without any animation or interactive elements.

82. D3 Mouseover

A static bar chart displays a dataset of 20 numeric values as vertical bars with blue fills and white value labels. Using the D3.js v4 library, the example demonstrates a basic mouseover interaction: hovering over any rectangle changes its fill color to orange. The visualization is built with SVG elements generated through `d3.scaleBand` for x-axis positioning, `d3.scaleLinear` for y-axis scaling, and event listeners attached via the `.on("mouseover", ...)` method. The code creates the SVG container, binds data to rectangle and text elements, and applies the color change directly to the selected node.

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.

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.