Skip to main content
SimilarExport ZIP
100%

Bar Chart with Basic Hover

✓ Published1🌍 Public
JJingxuan Yang
Last edited Feb 21, 2024
Created on Feb 21, 2024

The chart displays the top 10 houses by living area in square feet, sorted descending using D3's `descending` comparator. When a user hovers over a bar, it turns black while others gray, implemented via D3's `on('mouseenter')` and `on('mouseleave')` events that update the state. Using `observeResize` for responsive dimensions and `scaleBand`/`scaleLinear` from D3, the data comes from the `@RenoBlitz/dataset01` source with `sqft_living` as the plotted column.

AI-generated description

Challenge

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

Similar vizzes

Loading thumbnail…

Simple Bar Chart with Hover

This example displays the top 10 houses by living area in square feet, using a simple bar chart. Each bar represents a house ID, with height encoding its living area. The visualization is built with D3, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisLeft` for the axis ticks. It includes labeled axes and an inner rectangle fill, with bars rendered as SVG rectangles. The data is sourced from the `@RenoBlitz/dataset01` package, sorted in descending order via `d3.descending`.

JJingxuan Yang
92% match
Loading thumbnail…

Fork of Bar Chart with Basic Hover

A horizontal bar chart displays the top 10 house IDs by living area in square feet, sourced from the dataset01 module. The visualization uses d3.scaleBand and d3.scaleLinear to map categories and values, with axes rendered via the responsive-axes library. Hovering over a bar triggers a mouseenter event that appends a text label showing the exact data value and dims the bar, while mouseleave removes the label and restores opacity, using D3’s selection and state management for interaction.

JJingxuan Yang
87% match
Loading thumbnail…

Fork of Simple Bar Chart

This visualization displays a bar chart of the top 10 houses by living area (sqft) from a dataset, with house IDs on the x-axis and square footage on the y-axis. The main entry point (`index.js`) sorts the data in descending order, slices the first 10 entries, and passes them to a reusable `viz` function. The chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and axis labels from the `@curran/axis-labels` library, with bars rendered as `rect` elements.

JJingxuan Yang
82% 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
77% match
Loading thumbnail…

Hovers

A hoverable scatterplot maps bedroom count to living area square footage, with each point rendered as a semi-transparent circle against a light gray plot background. As the pointer moves over the chart, the code updates the state with the current cursor coordinates and draws two black crosshair lines extending from the hover point to the axes. The visualization uses D3 7.8.5 with a ResizeObserver to adapt the SVG to the container dimensions, and it applies linear scales for positioning.

JJingxuan Yang
75% match
Loading thumbnail…

FP: Bar Chart

This bar chart visualizes house sale prices across different regions, with each bar colored by region using an ordinal color scale. The interactive color legend allows users to hover over a region to highlight matching bars and fade the rest, implemented with D3.js enter/update/exit selections and hover state management. The chart is built from house sales data (houseRocket.csv) and uses a clean, minimal design with bars representing price values. Hovering over the legend highlights corresponding bars in the chart while dimming others, and hovering over bars emphasizes their legend entry. The visualization uses a sans-serif font, square color swatches, and a pointer cursor for interactive elements, with smooth opacity transitions for the hover effects.

JJingxuan Yang
75% match
Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo
72% match
Loading thumbnail…

Making a Bar Chart with D3

This horizontal bar chart displays counts of different housing situations, from rough sleeping to private housing, using a CSV data source. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data loads asynchronously via `csv`, then binds to rectangles with heights set by `yScale.bandwidth()` and widths proportional to each count, with maroon fills.

AAloysius
72% match