Skip to main content
SimilarExport ZIP
100%

Bar Chart with Basic Hover

✓ Published0🌍 Public
NNguyen Le Ngoc Tran
Last edited Nov 3, 2025
Created on Nov 3, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with Basic Hover

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.

CCurran Kelleher
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
92% 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
89% 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…

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
88% 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
87% match
Loading thumbnail…

Bar chart with D3.js

This bar chart displays the top 10 most populous countries for 2020, based on United Nations World Population Prospects 2019 data. The visualization uses D3.js v5 within a React framework, rendering bars as SVG rectangles. It includes animated interactions where hovering over a bar highlights it, displays its value, and shows the percentage difference compared to other countries. The chart features labeled axes for population and country names, with tooltips providing exact population figures via SVG `<title>` elements.

KKevin Raj
87% match
Loading thumbnail…

Bar Chart

This bar chart visualizes the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using horizontal bars to encode population size. The chart omits axes by design, instead relying on interactive tooltips to display values. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the x-axis, rendering as an SVG. D3’s `format` function converts large numbers into abbreviated forms like "1.4B" for the tooltips.

SStarkerRegen
87% match