Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart with Basic Hover

Public visualization

Viewing a saved revision (read-only)

60c7a17038934fdc9cb0ef6c20ed62d1

Bar Chart with Basic Hover

0 stars6🌍 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