Skip to main content
SimilarExport ZIP
100%

Bar Chart with Basic Hover

✓ Published6🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Feb 14, 2024

This bar chart displays the top 10 countries by population using data from the UN Population Estimates 2024. It highlights the currently hovered bar in black while dimming others to gray, using D3's `mouseenter` and `mouseleave` events with a state management system. The chart employs `scaleLinear`, `scaleBand`, and `axisLeft` from D3, with responsive axes from `@curran/responsive-axes` and an inner rectangle fill for the plotting area.

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 with Basic Hover

This bar chart displays the top 10 countries by total population from the UN population estimates dataset. Hovering over a bar highlights it in black while dimming the others to gray, with the hovered datum tracked via React-style state updates. The chart uses d3.scaleBand and d3.scaleLinear for positioning, and the @curran/responsive-axes library for axis rendering. Bars are drawn as SVG rectangles, with mouseenter and mouseleave events triggering interactive state changes.

NNguyen Le Ngoc Tran
96% match
Loading thumbnail…

Bar Chart with Basic Hover

This bar chart displays the top 10 most populous countries as of January 2024, with bar length representing population in thousands. It uses d3.scaleBand and d3.scaleLinear for positioning, while mouseenter and mouseleave events trigger state updates that dim non-hovered bars to gray. The visualization loads population data from the @curran/un-population-estimates-2024 package and uses @drbagwell/responsive-viz-axes for responsive sizing and axis rendering.

DDonald Bagwell
93% match
Loading thumbnail…

Fork of Bar Chart with Basic Hover

This example shows the top 10 most populous countries as a bar chart, highlighting the selected bar in black while graying out the others when hovered. It uses D3.js `scaleBand` and `scaleLinear` for positioning, with mouseenter and mouseleave events updating the chart’s state. The data comes from the UN population estimates, rendered in SVG with responsive axes and resizable dimensions.

FFremont
90% match
Loading thumbnail…

Fork of Fork of Bar Chart with Basic Hover

This example shows a horizontal bar chart of the top 10 countries by population, using data from the UN Population Estimates 2024 dataset. When a bar is hovered, it turns black while the others fade to gray. The visualization is built with D3.js (version 7.8.5), using `scaleBand` and `scaleLinear` for positioning, along with the `observeResize` and `axes` utilities from `@curran/responsive-axes`.

NNguyen Le Ngoc Tran
89% match
Loading thumbnail…

Responsive Bar Chart

This responsive bar chart displays the top 10 countries by population using data from the UN Population Estimates 2024. It adapts its width and height to the container size via the `observeResize` and `axes` APIs from `@curran/responsive-axes`. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for positioning bars, with `d3.axisLeft` for the y-axis and dynamic SVG resizing in `d3.select().attr()`. Gray rectangles mark the inner plotting area, while bar heights encode population values in thousands.

CCurran Kelleher
85% match
Loading thumbnail…

Responsive Bar chart following

This responsive bar chart visualizes the top 10 countries by total population, using 2024 UN population estimates. It shows each country’s population in thousands as horizontal bars, with labeled axes and a gray inner plot region. The visualization uses D3’s `scaleBand`, `scaleLinear`, and `axisLeft` to render marks, while `observeResize` from `@curran/responsive-axes` recalculates dimensions on container resizing, ensuring the chart adapts fluidly to varying viewport sizes.

Gg_ivaska@coloradocollege.edu
85% 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
85% match
Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React and D3 v5, with SVG rendering for the marks and axes. Population values are formatted in billions using D3’s `format` function, while `scaleBand` and `scaleLinear` position the bars. Hovering over each bar reveals a tooltip with the population figure via the native SVG `title` element.

Zzarioualid@gmail.com
84% match