Transplant Bar

100%

Transplant Bar

✓ Published1🌍 Public

Last edited Mar 1, 2021

Created on Feb 28, 2021

This visualization displays the total number of kidney transplants (combining deceased and living donors) for the top 20 hospitals from a CSV dataset. It uses a horizontal bar chart built with React and D3 v6, employing `scaleBand` for the categorical hospital names on the y-axis and `scaleLinear` for the numeric count on the x-axis. The SVG rendering includes axis ticks and gridlines, with bar widths proportional to transplant totals. Data is loaded asynchronously via `d3.csv` and parsed in a row function before being rendered.

AI-generated description

##Transplant Data

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Transplant Bar

A horizontal bar chart ranks the first five hospitals by total kidney transplants performed, combining counts of deceased and living donors. The visualization uses React to render SVG elements, with D3 v6 handling scales and axes: `scaleBand` positions hospital names on the y-axis while `scaleLinear` maps total counts to bar widths. Data loads from a CSV file via D3’s `csv` parser, and custom Axis components generate tick labels.

GGary Ditsch

93% match

Loading thumbnail…

Style Refactored Transplant Bar

This bar chart displays kidney transplant totals by hospital, using horizontal bars to compare values across institutions. The visualization is built with React and D3 v6, leveraging `scaleBand` and `scaleLinear` for axes, while data is loaded from a CSV via `useData` hook. The chart filters to hospitals with at least 250 total transplants, with bars colored teal and including hover tooltips. SVG rendering handles marks and axis ticks, with styled gridlines and labels for readability.

GGary Ditsch

91% match

Loading thumbnail…

Scatterplot Transplant Data

A scatterplot displays the relationship between the number of deceased and living organ donors across US hospitals, with each circle representing a hospital and hovering reveals its name. The visualization uses React with D3 v6 for data loading and scales, specifically `d3.csv` to fetch the kidney transplant dataset and `scaleLinear` for both axes. SVG rendering handles the marks and axes, with gridlines drawn from `d3.ticks()` through custom `AxisBottom` and `AxisLeft` components. The chart encodes the two donor categories on separate linear scales, with axes labeled accordingly.

GGary Ditsch

82% match

Loading thumbnail…

Transplant

This example uses React and D3 v6 to load and display a CSV file of kidney transplant data. The page initially shows a loading message, then renders the total number of records from the dataset using a simple state update triggered by `d3.csv`. The visualization is minimal, presenting the data count as plain text rather than a chart, and demonstrates basic asynchronous data fetching with React hooks and D3’s CSV parser. The code relies on `d3.csv` and React’s `useState` and `useEffect` hooks.

GGary Ditsch

81% match

Loading thumbnail…

Fork of Bar_Plot

This visualization is a horizontal bar chart showing the number of patients received by the top 10 hospitals in 2024. The bars, rendered as steelblue rectangles, display the patient count for each hospital, with hospital names listed along the y-axis and a scaled x-axis showing patient numbers with tick marks. The code uses React for component structure and state management, with d3.csv to load data from a remote CSV file, d3.scaleBand for the y-axis categories, and d3.scaleLinear for the x-axis values, alongside d3.axisBottom and d3.axisLeft helpers. The visualization is built as a single SVG within a React app, with margins and dimensions hardcoded.

Llathabemanadham@my.unt.edu

75% match

Loading thumbnail…

Bar chart from Jelena's imagination

This bar chart compares COVID-19-related versus other donor actions and amounts across different donor types. The visualization uses horizontal grouped bars, with one row for actions and another for amounts, displaying percentage values and using striped patterns to distinguish categories. Data is loaded from a remote CSV file using `d3.csv`. The chart is built with React and rendered as an SVG, employing `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.scaleOrdinal` for the color legend. Tooltips reveal exact percentages, while a color legend clarifies the COVID-19 and other categories.

BbeauMarko

74% match

Loading thumbnail…

Simpler J.I. Bar chart

This interactive bar chart visualizes donor data in Croatia, showing the percentage of donation actions and amounts by donor type, with a toggleable breakdown for COVID-19 versus other purposes. Built with React and D3 v6, it renders SVG marks using `scaleBand` and `scaleLinear`, with interactive menu buttons that switch between total, COVID-19, and other categories. The chart uses striped overlays via SVG `<pattern>` and `<mask>` to distinguish overlapping data, with tooltips on mouse hover. Data comes from a CSV file loaded with `d3.csv`, and the legend updates dynamically based on the selected category.

Kkragovic

74% match

Loading thumbnail…

Donations Effects - fixed rect height TEST

This stacked bar chart visualizes how donation amounts are split between COVID-19 and other purposes across different giving categories. Users can toggle between total donations, COVID-only, and other-purpose views via an interactive menu. The visualization uses React with D3 v6, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles with fixed heights. A striped pattern masks the first segment to distinguish it visually, while tooltips show percentage values. Data comes from an external CSV file about giving methods.

Kkragovic

73% match