Bar Chart

100%

✓ Published0🌍 Public

Last edited Jul 17, 2023

Created on Jul 15, 2023

This bar chart displays the elevations of 20 mountain peaks, using horizontal bars to compare their heights. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering includes custom axis components and rectangular marks with tooltips, fed by data loaded from a CSV file via the `useData` hook. The chart labels the axes with a custom format that abbreviates large numbers, and the data is sourced from a gist published by the author.

AI-generated description

Bar Chart using D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays the elevations of the 20 highest mountain peaks, with the Y-axis listing mountain names and the X-axis showing elevation in feet. Built with React and D3 v5, it uses `scaleBand` for the categorical Y-axis, `scaleLinear` for the numeric X-axis, and `format` to abbreviate tick labels. Data loads asynchronously from a CSV file via `d3.csv`, and SVG rectangles render each bar with a native `<title>` element for tooltips.

LLakshmanRangisetti

94% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the elevations of 25 mountain peaks from a CSV dataset, using a horizontal bar layout where bar length encodes elevation in feet. Each mountain’s name appears on the y-axis, with an orange gridline and tick labels on the x-axis. The chart is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles. Data is loaded asynchronously via `d3.csv` and displayed after a brief loading state.

AAkhila-Battula

93% match

Loading thumbnail…

Bar Chart

This bar chart displays the elevation of notable mountain peaks in feet, sorted along the y-axis with horizontal bars extending from left to right. The visualization uses React components alongside D3 v5 APIs including `scaleBand`, `scaleLinear`, and `format` to render the SVG marks and axes. Data is loaded asynchronously via a CSV file from a GitHub gist, and tooltips show formatted elevation values when hovering over each bar. The chart includes styled gridlines, axis labels, and a descriptive title.

Ssuryavamsi00024

92% match

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the elevations of the 25 highest mountain peaks, using horizontal bars scaled from 14,000 feet upward. The visualization maps mountain names along the y-axis and elevation values along the x-axis, with tick marks and gridlines rendered as SVG elements. It is built with React for component structure and uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `max`, and `csv` to load and process the Mountains_dataset.csv file. The chart applies a steelblue fill to the rectangular marks and an orange stroke for its vertical gridlines.

Llikith1266

90% match

Loading thumbnail…

Fork of Bar Chart

This example shows a horizontal bar chart of the elevations of 25 mountain peaks, using the Mountains_dataset.csv. It displays the marks and channels concept with rectangular bars encoding elevation values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical mountain names and `scaleLinear` for the elevation axis. The SVG is rendered with React components, and the chart includes gridlines and axis labels, with a static dataset fetched via `csv`.

Llikith1266

88% match

Loading thumbnail…

yasmeen elevations of mountain

This visualization displays the elevations of 25 mountain peaks in feet as horizontal bars, with mountain names listed along the vertical axis. The bars are colored green and rendered as SVG rectangles, while the horizontal scale ranges from 14,000 feet to the maximum elevation in the dataset. The chart uses React for component management and hooks, with D3 v5 functions like `scaleBand`, `scaleLinear`, and `csv` to load and map the data from a GitHub-hosted CSV file. Axis ticks are manually drawn as red lines with text labels.

Yyasmeenha

81% match

Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman

75% match

Loading thumbnail…

Bar Chart Example

This example shows a bar chart comparing five categories using a static dataset, with each bar’s height encoding the category value. It renders as an SVG via D3 v6, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The bars are drawn as `rect` elements, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is built inside a React-compatible structure but uses plain JavaScript in a single HTML page.

BBhavanaGIrni

75% match