Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Bar Chart with Basic Hover

Public visualization

Viewing a saved revision (read-only)

5f16be29f5944dbab4da672da91f5899

Fork of Bar Chart with Basic Hover

0 stars0🌍 Public
Kkotlavamsireddy@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

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.

AI-generated description

Challenge

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