Aditya - Patient Data Profile

100%

Aditya - Patient Data Profile

✓ Published0🌍 Public

Last edited May 5, 2022

Created on Apr 21, 2022

This example visualizes a patient’s clinical data profile in a health dashboard, displaying metrics like blood sugar, BMI, waist measure, pulse, and lifestyle factors alongside a circular progress indicator for estimated risk. The layout uses a white rounded-rectangle panel with SVG graphics and React components, including an Ant Design `Progress` circle and `Tooltip` for risk percentage, while inline `Tooltip` elements annotate abnormal values with percentage deviations. Interactive selection boxes and tag elements, built with custom React components and SVG, highlight actionable factors and potential interventions for similar patients.

AI-generated description

Data Profile Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Aditya - Figma Component

This interactive React visualization presents personalized health recommendations to reduce risk, showing two selectable action items with their associated factors, current values, expected outcomes, and difficulty levels. The interface uses SVG rendering with D3.v7 for graphics, displaying recommendation cards within styled boxes where users can toggle selections via tick logos and colored borders. Data-driven text elements communicate patient-specific information, while tag boxes with color-coded indicators visualize risk percentages and difficulty ratings. The example builds on population data from the United Nations World Population Prospects 2019, though the visible content focuses on the recommendation interface rather than the underlying population charts.

AAditya Bhattacharya

82% match

Loading thumbnail…

Fork of Diabetes Data

This dashboard visualizes diabetes risk factors from patient data using a linked scatter plot and bar chart. The scatter plot positions patients by BMI and glucose levels, colored by age and shaped by outcome, while the bar chart shows average glucose by diabetic status. Clicking a point highlights that patient and displays their full record below. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `scaleBand`, `symbol`, and `axisBottom` to render the interactive charts.

Sskasliwal@wpi.edu

74% match

Loading thumbnail…

Aditya - React D3 Conditional Line Chart Practice

A connected scatter plot renders monthly risk values from a CSV file as an SVG line chart. The D3 v6 scaleTime and scaleLinear functions map dates and values, while conditional classes color each circle marker green, amber, or red based on thresholds at 50% and 75%. The component visualizes time series data and includes dashed reference lines for these thresholds. Tooltips show exact percentages, and axes are generated using D3's tick formatting.

AAditya Bhattacharya

72% match

Loading thumbnail…

Aditya - Summary Plot practice

This visualization displays a single summary metric value of 5.8 inside a green number box, accompanied by a white inner plot area with rounded corners. Built with React and D3 v6, the component loads time-series data from a CSV file containing dates and values. The interface includes reusable box components with selection states, using colored strokes to indicate selected versus unselected items. Additional UI elements include tick and info icons for interactive affordances, all rendered as SVG elements with drop-shadow effects for visual depth.

AAditya Bhattacharya

71% match

Loading thumbnail…

Fork of Project Momentum Color

This interactive scatter plot explores the relationship between patient age and a selectable health metric (cholesterol, resting blood pressure, max heart rate, oldpeak, or age) from a heart disease dataset. A dropdown menu controls the Y-axis variable. The visualization uses D3.js (v7) within a React framework to render an SVG, featuring a legend that allows users to hover and filter data points by gender, highlighting male and female patients in dark blue and pink, respectively. The chart updates dynamically with selections.

AAbhi Yammanuru

71% match

Loading thumbnail…

Prototype 3, interactivity increment

This interactive boxplot visualization compares the distribution of health metrics for male and female patients, with a dropdown menu to switch between Resting BP, Cholesterol, Max HR, Age, and Oldpeak. Hovering over a boxplot dims the other group to facilitate comparison. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` to compute quartiles, whiskers, and medians from the heart disease dataset. The interactivity is managed through React state for the selected metric and hovered sex, with D3 used for rendering the SVG axes and geometric elements.

AAbhi Yammanuru

70% match

Loading thumbnail…

Project

This interactive D3.js dashboard explores diabetes medication, gender, and age-group trends related to heart disease outcomes. It shows three SVG charts built from a merged CSV dataset, including a bar chart of heart disease cases by medication status, a pie chart of patient gender distribution, and a bar chart of cases across age groups. The code uses `d3.csv` to load data, `d3.select` to render SVG elements, and a custom tooltip for hover interactions. An embedded Power BI iframe complements the narrative with additional health analytics.

Ppavanbellam@my.unt.edu

70% match

Loading thumbnail…

Polished Medical Cost Personal (with menu)

This interactive scatterplot explores the Medical Cost Personal Dataset, plotting patient attributes such as age, BMI, and charges against each other. Each circle represents a patient, with color indicating smoker status and size reflecting age, allowing for visual clustering analysis. Built with React and D3 v5, the visualization features dropdown menus that dynamically change the X and Y axes at runtime. The SVG rendering uses `scaleLinear` and `scaleOrdinal` from D3 to map data values, while custom React components like `AxisBottom`, `AxisLeft`, and `Marks` handle the chart elements. Data is loaded asynchronously via the `csv` function.

Mmeperezcuello

69% match