100%

Simple Bar Chart with Hover

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

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`.

AI-generated description

A bar chart showing the top 10 houses with largest living area.

Challenge

Fork this viz and modify it to show your own data

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

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

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

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

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

Loading thumbnail…

ice5.1

This bar chart compares house prices across different house sizes, with teal bars representing each category and rotated labels on the x-axis for readability. The visualization uses D3 v7 to load CSV data from a GitHub gist, scales the data with `d3.scaleBand` and `d3.scaleLinear`, and renders the chart as SVG. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the plot area measures 900 by 380 pixels with margins. The code directly binds the data to rectangle elements for each bar.

Kktvgs25@gmail.com

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

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

71% match