bar-chart

100%

✓ Published0🌍 Public

Last edited Aug 26, 2023

Created on Aug 26, 2023

This horizontal bar chart visualizes the 2021 chargesheet rates for Indian states and union territories using a sequential blue color scale. Built with React and D3 v7, it loads data from a GitHub-hosted CSV file, sorts values in ascending order, and renders bars scaled by a linear x-axis with a categorical y-axis. The chart includes interactive hover effects that display state names and adjust bar opacity and stroke width. Axes are generated using d3.axisLeft and d3.axisBottom within a 1000x1000 SVG layout.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

India-Map-react-app-1

This example presents a horizontal bar chart visualizing crime rates against women across Indian states and union territories in 2021, using data from a CSV file loaded via d3.csv. The React application renders SVG bars with d3.scaleLinear and d3.scaleBand, sorting states by descending crime rate. Bars are colored steel blue with adjustable opacity and stroke width on selection. The chart includes axes generated by d3.axisLeft and d3.axisBottom, plus value labels and hover-triggered text showing state names and rates.

NNita

80% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays the top 15 most populous Indian states, ranked by basic cost. The visualization uses React to manage state and render SVG elements, while D3.js provides scales, axes, and data loading via `d3.csv`. The horizontal bars are drawn with SVG `rect` elements, with axes generated using `d3.scaleBand` and `d3.scaleLinear`. Data is fetched from a remote CSV file hosted on GitHub, styled with explicit margins and a loading state.

77% match

Loading thumbnail…

Bar chart Graph with D3.js

A horizontal bar chart displays the population of Indian states, with bars sorted by descending values from Uttar Pradesh to Andhra Pradesh. The visualization uses D3.js v7 to load CSV data via `d3.csv` and renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with state labels on the y-axis and population counts on the x-axis. The bars are styled orange with axis labels added as SVG text elements.

DDanthalakirankumar

77% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays COVID-19 case counts across Indian states and union territories, using a horizontal layout where each bar’s length represents confirmed cases. The visualization uses React for component structure and d3.scaleLinear for mapping data values to pixel positions, with d3.axisLeft and d3.axisBottom rendering the axes. The bars are styled with a teal fill, and the chart includes an axis label for the case count. Data comes from a CSV file with columns for state, cured, deaths, and confirmed cases, which is parsed and sorted before being passed to the React rendering logic.

Ssaikrupa82

77% match

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the number of cancer patients for ten Indian states and union territories in 2016, using the `csv` loader from D3 v6 to fetch the dataset. The React app renders SVG bars with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The bar widths encode patient counts, and the chart is static with no interactivity.

Yyastika

77% match

Loading thumbnail…

Bar chart Testing

This example displays a horizontal bar chart of Indian population data by year, using React to render SVG elements. D3’s `scaleLinear` maps population counts to bar widths, while `scaleBand` positions bars along the y-axis and `scaleOrdinal` assigns colors from `schemeDark2`. The code fetches CSV data via D3’s `csv` method, parses the first five entries, and draws axes with SVG lines and ticks. Both D3 v7 and React 18.2 are used, with the visualization mounted through `ReactDOM.createRoot`.

PPathan Khuvanejarkhan

76% match

Loading thumbnail…

Bar Chart

This example shows a bar chart of the population of India across five census years, drawing horizontal bars whose widths correspond to population values. As the largest populations produce the longest bars, the chart quickly communicates relative magnitudes. Built with React and D3, it uses D3's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `scaleOrdinal` and `schemeDark2` providing the bar colors. The data is loaded from a remote CSV file via D3's `csv` function and displayed as SVG rectangles with tooltip titles.

PPathan Khuvanejarkhan

75% match

Loading thumbnail…

BarChart

This bar chart visualizes a small dataset comparing values across five countries, including the USA, UK, and India, using an SVG rendering approach. The bars are drawn with `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis values, styled in steel blue. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the chart built using D3 v6 within a React environment. The fixed dimensions and margins define the layout, while the data is hardcoded in the script.

BBhavanaGIrni

75% match