100%

act_6_2010

✓ Published1🌍 Public

Last edited Oct 20, 2024

Created on Oct 20, 2024

This example presents a bar chart that highlights individual bars on mouse hover. The visualization renders categorical data on the x-axis and a numerical scale on the y-axis, using a muted gray for non-hovered bars and black for the bar under the cursor. Built with D3 scales (`scaleBand`, `scaleLinear`), it leverages the `@curran/responsive-axes` library for axis rendering. Hover interactions are managed via `mouseenter` and `mouseleave` events, updating the `hoveredDatum` state through `setState`.

AI-generated description

Challenge

Add this interaction to a bar chart or other visualization that you have created

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This example shows a simple bar chart with a tooltip displaying each bar’s label and value on hover. The chart is rendered as SVG using D3 v3, with an ordinal x-axis and linear y-axis. Bars are filled from a custom color palette, and a mouseover event triggers a tooltip whose position follows the cursor. The data is hardcoded in the page as an array of label–value pairs.

DDarioCel

76% match

Loading thumbnail…

act_6

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Each bar’s length encodes the numeric population value, with a tooltip showing the formatted value on hover. Built with React and D3 v5, the example uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded from a remote CSV via `d3.csv`, and axes and marks are rendered as SVG elements through custom React components.

Hhlmn4936@gmail.com

75% match

Loading thumbnail…

act6 q2

This example shows a stacked bar chart of sales by category across four quarters, with tooltips revealing exact values per segment. It uses D3 v7’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom` to render an SVG. The code loads data from a local CSV, applies an ordinal color scale, and builds an interactive hover tooltip with D3 selections.

Sshravan.s0710@gmail.com

75% match

Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr

75% match

Loading thumbnail…

BarChart with Mouse Hover

A bar chart displays population figures for ten countries, with bars animating upward over two seconds when the page loads. Hovering over a bar turns it red with a blue outline and displays a text label showing the country name and its population, formatted using d3.format. The visualization uses d3.scaleBand and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load the data from a CSV file.

Rrahool001

75% match

Loading thumbnail…

Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, with hover highlighting on each bar. The visualization uses D3 v4 to bind the dataset, scales it from seconds to hours, and renders the bars as SVG rectangles with axes. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The bars change color on mouseover via CSS, while the data comes from an embedded inline array rather than an external file.

HHelen-Luwei-Zhang

75% match

Loading thumbnail…

Fork of Bar Chart with Basic Hover

This example shows a horizontal bar chart of the top 20 most populous countries, with a hover interaction that highlights the selected bar in black and dims the others to gray. The chart is built using D3's `scaleBand` and `scaleLinear` to map country names and population values to positions, while `axisLeft` renders the y-axis. Mouseenter and mouseleave events on the bars update a `hoveredDatum` state to drive the color changes. The data comes from a CSV file containing country population figures, and the visualization uses an inner rectangle fill for visual separation.

Kkotlavamsireddy@gmail.com

75% match

Loading thumbnail…

Bar hover

A bar chart shows total Olympic medals for the top ten countries, using a dataset from the `@akankshapawar1/olympics` package. D3’s `scaleBand` and `scaleLinear` position the bars, while hover interactions change their fill color between black and gray via React state. The chart includes axis labels and uses d3’s `axisLeft` and `axisBottom` for ticks, with a ResizeObserver for responsive sizing.

AAkanksha

74% match