100%

Fork of Bar Chart with Basic Hover

✓ Published1🌍 Public

Last edited May 2, 2024

Created on May 2, 2024

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.

AI-generated description

Challenge

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

MIT Licensed

Similar vizzes

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

94% 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

92% match

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

90% match

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

89% match

Loading thumbnail…

Fork of Simple Bar Chart

This example visualizes the top 10 most populous countries as of January 1, 2024, using a horizontal bar chart where bar length encodes population in thousands. It highlights the data source from UN population estimates. The code uses D3’s `scaleBand` and `scaleLinear` for positioning, along with custom axis and label helpers. It filters and sorts the input data, then renders the bars and axes within an SVG container. The chart emphasizes ranking differences while maintaining a clean, readable layout with a gray inner background.

MMartin Guo

88% 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

87% match

Loading thumbnail…

Fork of Bar chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. The visualization uses D3.js v6 with an SVG rendering, employing `d3.csv` to load the data and `d3.scaleLinear` and `d3.scaleBand` for the x and y axes. The x-axis labels are formatted from values like 1.4G to 1.4B via a custom tick format function. A background grid is rendered using the axis tick lines.

Aannadehtiarova

87% match

Loading thumbnail…

Fork of Making a Bar Chart 2

This example visualizes the top 10 most populous countries in 2018 as a horizontal bar chart, using data from the United Nations World Population Prospects. It highlights custom zero-lines and axis labels. The SVG visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for axes, with tick values formatted to abbreviate billions.

Eeveryfin-in

87% match