100%

Fork of Bar Chart with Basic Hover

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

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.

AI-generated description

Iterating Work:

Make changes in mouse enter event so that it can show the specific data value when you hover over a data bar.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with Basic Hover

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.

JJingxuan Yang

87% match

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

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

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

80% 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…

Fork of Bar Chart interactive

This bar chart visualization displays a dataset of 50 randomly generated values as SVG rectangles, with each bar labeled by its numeric value and colored on a purple scale. Built with D3 version 6, the chart uses `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Clicking the text above the chart triggers a one-time update that replaces the dataset with 25 new random values, recalculating the bar heights and positions accordingly.

RRahulSai05

74% match

Loading thumbnail…

Fork of Responsive Bar Chart

This responsive bar chart visualizes furniture dataset values using D3 v7, fetching JSON data from a GitHub gist. It renders vertical steel-blue bars with ordinal x-axis labels and a linear y-axis, using margins and scales to map data points to screen coordinates. The chart adapts to its container while maintaining a fixed 600x400 SVG viewport.

Ttejasviteegala@my.unt.edu

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

73% match