Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3

✓ Published1🌍 Public
RRyan Offstein
Last edited Sep 9, 2025
Created on Sep 9, 2025

A React and D3 scatter plot visualizes hospital readmission metrics across U.S. states, comparing the number of hospitals performing worse versus better than the national average for each measure. The code loads CSV data, converts non-numeric values to NaN, and filters out invalid points before rendering circles with d3.scaleLinear. The `viz` function uses `selectAll` and `data().join()` to bind points, with padding applied to the x and y axes. The dataset comes from CMS hospital readmission rates per state.

AI-generated description

This is my dataset of hospital readmission rates per state.

Scatter Plot

  • The scatter plot Draws a point on the graph for each state and for each of the 5 or so readamission metrics across diseases
  • On the X axis we have "Number of Hospitals Worse" than the national average
  • On the Y axis we have "Number of Hospitals Better" than the national average
  • So The bottom right would contain the states that have really poor readmission rates for a disease when compared to the national average,
  • and top left data points would have less readmission rates than the national average for that readmission type

Data

  • Here is a link to the data

  • What it does is look at all the hospitals in each state, and count the hospitals and their comparison to national averages across metricsk

  • It tracks the readmission rates for people of different diseses such as heart failure, pneumonia...

  • It also tracks the numerical values of the average number of return days

Attributes

  • Here are the attributes
    • State
      • Categorical (Geographic)
    • Measure ID
      • Categorical
    • Measure Name
      • Categorical
    • Number of Hospitals Worse
      • Quantitative
    • Number of Hospitals Same
      • Quantitative
    • Number of Hospitals Better
      • Quantitative
    • Number of Hospitals Too Few
      • Quantitative
    • Start Date
      • Time
    • End Date
      • Time
    • Number of Hospitals Fewer
      • Quantitative
    • Number of Hospitals Average
      • Quantitative
    • Number of Hospitals More
      • Quantitative
    • Number of Hospitals Too Small
      • Quantitative
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hospital Readmission Rates

This example displays a fork of a hospital readmission rates visualization, loading data from a CSV file and rendering it as raw JSON text. The code uses D3 v7 to fetch and parse the CSV with `d3.csvParse`, converting "Not Applicable" values to NaN and numeric fields to numbers. State management is handled through a custom `setState` function, with the visualization updating whenever data changes. The implementation shows how to progressively load and process tabular healthcare data, preparing it for eventual graphical display.

VVinayak Revankar
82% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 with Diabetes Data

A scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with each circle representing a patient. The React app loads the CSV data and passes it to the D3 visualization module. D3's `scaleLinear` and `extent` functions calculate the axis domains, while the `join` operator binds data points to SVG circles, setting their positions, radius, and fill color.

Rrpkupfer@wpi.edu
81% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
79% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

A reusable D3.js scatter plot visualizes patient satisfaction scores against age, with points colored by hospital service type (surgery, emergency, ICU, or general medicine). The chart includes labeled axes for age and satisfaction score, plus a title. Built using D3 v3, the code loads patient CSV data, converts numeric fields, and calls a custom ScatterPlot function that accepts configurable accessors for x, y, and color values.

Ssravya7136@gmail.com
78% match
Loading thumbnail…

Hospital Readmission Rates

This visualization displays hospital readmission rates across U.S. states, comparing each state’s hospital performance to national averages for various conditions like heart failure and pneumonia. The data, sourced from CMS, is loaded via `fetch` and parsed with `csvParse`. The view renders the raw parsed data as JSON text using D3’s `select` and `join` methods, with non-applicable values converted to NaN. It provides a direct, unprocessed look at the dataset’s structure and numeric fields.

RRyan Offstein
78% match
Loading thumbnail…

Fork of React & D3 Starter

A simple scatter plot displays ten labeled points from a small CSV dataset, mapping x and y coordinates with linear scales. The visualization demonstrates a modular React and D3 integration where React manages the SVG container and D3 handles the rendering logic. The `viz.js` module uses `d3.scaleLinear` and `d3.extent` to compute scales, while `axes.js` employs `d3.axisLeft` and `d3.axisBottom` for chart axes. Data flows through a custom `useData` hook that loads and parses the CSV with `d3.csv`. The code separates concerns across files, making it a practical starting template for scalable projects.

Tteissierducros
77% match