Skip to main content
SimilarExport ZIP
100%

Fork of Bar Chart

✓ Published0🌍 Public
Llikith1266
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from 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`.

AI-generated description

Webpage that displays Elevations(in ft.) of Mountains in bar graph.

MIT Licensed

Similar vizzes

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
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
89% match
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
88% 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
86% match
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
86% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js! by Shailu

This example uses React to build a bar chart from student height data, loading the first ten records from a remote CSV file. The code employs `scaleBand` and `scaleLinear` from D3 to position rectangular bars along a horizontal axis. SVG elements are rendered declaratively, with gridlines and labels mapped from the data's name and height fields. The chart is displayed within a fixed 960x500 pixel viewport, and the bars are colored with a light green fill.

Rreddysushma994@gmail.com
76% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
76% match
Loading thumbnail…

Fork of Fork of data visulization

This example shows a horizontal bar chart of country populations, using bar length to encode population values and vertical position to encode country names. The visualization renders as SVG with steel-blue bars and axes, drawing from a CSV file that is loaded asynchronously and preprocessed by multiplying population values by 1,000. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` within a React context, though the primary rendering is handled directly with D3 selections and SVG elements.

Yyingzhe-z
76% match