83. D3 Mouseout

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.

91% 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.

83% match

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.

83% match

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.

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.

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.

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.

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.