Scatterplot Transplant Data

Transplant Bar

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.

82% match

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.

79% match

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.

77% match

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

PPeter Maida

72% match

Scatter Plot with Color Legend

This scatter plot visualizes death statistics by year and cause, with each point colored by sex using a red and blue ordinal scale. The React-based component uses D3 v5 scales for positioning axes and circles, rendering as SVG. A color legend on the right explains the sex encoding, while dropdown menus allow selecting different death metrics. The current implementation filters data by age group, though the README notes the sex, ethnicity, and age menus are not fully functional. Data is loaded from a CSV file via D3’s CSV parser.

PPeter Maida

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.

Hharichandanamone21@gmail.com

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Types of donnors

This interactive bar chart visualizes donor types, comparing the total number of donations with those attributed to Covid and other causes. Three text labels at the bottom of the chart act as a menu, allowing the user to switch the quantitative axis between these three categories. The visualization is built with React and D3 v6, using `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the quantitative axis, and SVG rectangles. The data is loaded from a CSV file and formatted with `d3.format`.

BbeauMarko