Horizontal grouped bar chart

100%

Horizontal grouped bar chart

✓ Published0🌍 Public

Last edited Jun 20, 2021

Created on Jun 19, 2021

This horizontal grouped bar chart displays the percentage prevalence of a health-related indicator across demographic subgroups, including gender, education level, wealth quintile, and urban/rural residence. The visualization uses a single series of horizontal bars, with subgroup names on the y-axis and percentage values on the x-axis. Built with React and D3 v6, the chart leverages `scaleLinear` and `scaleBand` to map data values and categories, renders bars and value labels as SVG elements, and includes a custom tooltip that appears on mouseover. Bars are styled with varying opacity to distinguish key subgroups from secondary categories.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Horizontal category Barchart

This horizontal category barchart displays percentages across demographic subgroups, with bars colored in translucent green and interactive tooltips revealing subgroup details on hover. The visualization uses React for component state management and D3.js v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to bar lengths. Data comes from a local JSON file containing subgroup categories like Sex, Location, Caste, and Wealth Index. Tooltips are implemented as HTML divs positioned via D3’s selection interface. The chart renders as an SVG with a light gray axis grid, and bars animate in response to state changes from React’s `useEffect` hooks.

AAnimesh Nautiyal

85% match

Loading thumbnail…

Final_Project_Interactive_Bar_Chart

This interactive bar chart displays the prevalence of various health-related measures across demographic and temporal categories. Users can switch between different data groupings—such as year, sex, race, employment, and medical history—using on-screen buttons. The visualization is built with D3 v7 and renders as an SVG, updating bars and axes through a general update pattern that removes and recreates the chart. Data values are mapped on a linear scale from 0 to 1, showing proportions for each selected category.

YYYYZZZ

78% match

Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado

76% match

Loading thumbnail…

Horizontal Bar Chart

This horizontal bar chart displays vaccination rates across five New York City boroughs, with radio buttons allowing viewers to switch between eight monthly time points from 2021 to 2022. The visualization uses D3 v7 scales and axes to map percentage values from 0 to 100 on the x-axis, with color-coded bars representing each borough. Interactivity is implemented through click event listeners that rebind bar width and label data based on the selected month. The SVG rendering includes background rectangles, axis groups, and text labels showing exact percentages.

Llinlinlin-yx

76% match

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays population data across multiple categories, with each group of bars representing a different region or time period. The visualization uses D3.js v5 to render the chart as SVG elements, employing `d3.scaleBand` for positioning the grouped bars and `d3.scaleLinear` for the y-axis. A legend identifies each bar’s category, while axes are formatted using `d3.axisBottom` and `d3.axisLeft`. The chart also demonstrates dynamic data handling through `d3.csvParse` with auto-typing.

FfaRriaN

76% 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

75% match

Loading thumbnail…

Making a bar Chart

This example displays a horizontal bar chart of country populations, with bars scaled proportionally to population values and country names on the vertical axis. It uses D3 v5 within a React-like structure, loading data from a local CSV file and rendering to SVG. The code employs D3’s `scaleLinear` for the numeric axis, `scaleBand` for categorical spacing, and `axisBottom` and `axisLeft` to generate tick marks and labels.

Ddamankwah

75% match

Loading thumbnail…

Chart2.js

This example shows a horizontal bar chart of population data for 15 countries or regions, using bars scaled linearly to represent population values. The visualization is built with React and rendered as SVG, using D3 v5’s `scaleLinear` and `scaleBand` for positioning and sizing bars. The code loads data from a CSV file, multiplies population values by 1000 to convert them to raw numbers, and appends rectangles to the SVG. It highlights the simplest D3 approach for creating categorical comparisons.

Aacervantesc

75% match