Skip to main content
SimilarExport ZIP
100%

Bar Chart

✓ Published0🌍 Public
LLakshmanRangisetti
Last edited Jul 16, 2023
Created on Jul 16, 2023
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

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.

Ssrikkanth05
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
93% 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
86% 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
76% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a basic bar chart using React and D3.js, displaying the heights of six notable buildings from a CSV data file. The SVG-based visualization renders steelblue rectangles for each bar, with text labels sized at 1.4em. The code initializes by selecting the SVG element from the HTML, then loads the data using D3's `csv` function, which parses the building names and heights. The current implementation focuses on data ingestion and console logging, with the visual encoding already defined in the stylesheet.

Ddivyanshu7073
75% match