100%

Fork of Simple Bar Chart

✓ Published1🌍 Public

Last edited Feb 13, 2024

Created on Feb 6, 2024

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.

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…

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

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

84% match

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

82% match

Loading thumbnail…

Fork of Simple Bar Chart

This fork of a simple bar chart displays the top 10 most populous countries as of January 1, 2024, using data from the UN population estimates dataset. The visualization ranks countries by total population in thousands, with bars sorted in descending order. Built with D3 v7, it uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, while `axisLeft` and custom axis-label utilities render the chart elements. The reusable `viz` component accepts configurable margins, labels, and data mappings, making it adaptable for different datasets.

Ppadmeshnaik22@gmail.com

73% match

Loading thumbnail…

Fork of Simple Bar Chart

This visualization displays a bar chart ranking the top ten geographical areas by nitrogen dioxide (NO2) levels, with bars colored steelblue and labeled axes for geographical area and NO2 concentration in parts per billion. The code filters and sorts input data by descending NO2 values, then uses D3’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG. It leverages the `viz` function from `@curran/axis-labels` for reusable axis components, with data loaded from a linked dataset.

Vvigneshs1006@gmail.com

73% match

Loading thumbnail…

Fork of Simple Bar Chart

This fork of the simple bar chart displays the ten most populous countries as of January 1, 2024, with country names on the x-axis and population in thousands on the y-axis. It uses D3’s `scaleBand` and `scaleLinear` to position bars, along with `axisLeft` and the `@curran/axis-labels` helper for axis rendering and labels. The data is loaded from a GitHub-hosted CSV file, filtered to countries, and sorted in descending order to select the top ten.

Bblanchestora@gmail.com

72% match

Loading thumbnail…

Fork of Simple Bar Chart

This fork of a bar chart visualization displays the top 10 most populous countries as of January 1st, 2024, using population data from the @curran/un-population-estimates-2024 dataset. The chart shows country names on the x-axis and population values in thousands on the y-axis, with bars rendered via SVG rectangles. It uses D3.js APIs including `scaleLinear`, `scaleBand`, and `axisLeft` to build the scales and axes, while importing axis label helpers from @curran/axis-labels. The visualization sorts the data in descending order and slices the first 10 entries before rendering.

Llegrande.sd.designs@gmail.com

72% match

Loading thumbnail…

Fork of Simple Bar Chart

This bar chart displays the top 10 most populous countries as of January 1, 2024, using data from the `@curran/un-population-estimates-2024` dataset. It filters for entries of type "Country/Area", sorts by the total population column in descending order, and selects the first ten. The visualization uses D3.js functions like `scaleBand` for the categorical x-axis, `scaleLinear` for the population y-axis, and custom axis label helpers. The code also demonstrates the `.join()` pattern for declarative SVG element creation, and includes a grey inner rectangle to visually frame the plotting area.

SSander Rebane

72% match