Skip to main content
SimilarExport ZIP
100%

Fork 1

✓ Published3🌍 Public
Bboinapallyhimaja657@gmail.com
Last edited Apr 9, 2025
Created on Apr 8, 2025

This interactive health dashboard explores relationships between lifestyle factors and health metrics using multiple D3.js v7 visualizations. A scatter plot shows sleep duration versus sweet food intake with jittered points colored by gender, while a bar chart displays average heart rate by consumer type. A pie chart breaks down cholesterol levels across alcohol consumption categories, and an animated box plot filters heart rate distributions by gender with hover tooltips. The dashboard uses `d3.rollups`, `d3.groups`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.pie` with transitions for smooth updates, loading TSV data from a GitHub gist.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

group 9 bar and scatter plot

This interactive dashboard displays health metrics through four charts: a scatter plot of sleep duration versus sweet food intake colored by age group, a bar chart of average heart rate by consumer type, a pie chart showing cholesterol levels by alcohol intake, and box plots of heart rate grouped by sleep disorder and meat intake. Built with D3 v7, the charts use d3.scaleLinear, d3.scaleBand, d3.pie, and d3.quantile, with dropdown filters and tooltips. Data loads from a TSV file via d3-fetch, and all visualizations render as SVG with animations.

Llakshmisurekhamaddukuri@my.unt.edu
85% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This visualization gallery page presents a health dashboard exploring how diet, cardiovascular health, and sleep influence each other. It uses D3.js v7 and links to multiple Tableau Public dashboards and VizHub-hosted D3 visualizations. The page displays project buttons that route to external scatter plots, line charts, and dashboards, with a bubble-chart-style backdrop. The code sets up core D3 modules via package.json and uses CSS flexbox, backdrop filters, and hover transitions to organize the gallery layout. The visualization itself is a curated collection of health-tracking charts focused on the three-way relationship between lifestyle factors.

Bboinapallyhimaja657@gmail.com
83% match
Loading thumbnail…

Project

This visualization presents a health data dashboard with three SVG charts. It includes a pie chart showing gender distribution, a bar chart displaying age distribution using d3.bin, and a scatter plot correlating glucose levels with BMI using d3.scaleLinear. The code uses d3.csv to load data and d3.rollup for aggregation, rendering all charts with D3 v7's SVG API.

Ppavanbellam@my.unt.edu
80% match
Loading thumbnail…

Fork 11

This bar chart displays the relationship between daily water consumption and average sleep quality, with a dropdown filter for gender and the "7-10 cups" category excluded. The visualization renders aggregated data using SVG and D3 v7 modules, including `scaleBand`, `scaleLinear`, and `axisBottom`. Bars are interactive, showing a tooltip on hover and changing color, while the data is sourced from a TSV file processed with `rollups` and `mean` from `d3-array`.

Bboinapallyhimaja657@gmail.com
80% match
Loading thumbnail…

Fork of Fork 1

This example shows a bar chart comparing average sleep quality across different water consumption levels, with each bar colored by gender. Built with D3.js v7, the visualization loads CSV data from a GitHub gist and aggregates it using `d3.rollups` to compute group means. The SVG rendering includes an ordinal color scale, rotated bottom axis labels, and interactive tooltips that display additional details on mouseover.

Bboinapallyhimaja657@gmail.com
80% 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
79% match
Loading thumbnail…

Fork of HTML Starter

This interactive dashboard presents three linked D3.js v7 visualizations built from the classic cereal dataset of 77 products. It shows a bar chart of average calories by manufacturer, a scatter plot of sugar content versus consumer rating with hot/cold cereal color encoding, and a multi-series chart combining average calories as bars with average rating as a line across manufacturers. The code uses D3's `rollup`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs for data aggregation and chart construction, rendered as responsive SVGs with a dark theme, gridlines, tooltips, and a legend.

Ppanyamsantosh09@gmail.com
79% match
Loading thumbnail…

Fork of Fork of HTML Starter

This scatter plot visualizes the relationship between sleep duration and stress level from a Kaggle dataset on sleep health and lifestyle, with points colored by gender and a legend for reference. Built with React and D3 v7, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical coloring, and `d3.axisBottom`/`axisLeft` for ticks. Hovering over a point reveals a tooltip with details on person ID, gender, sleep, stress, and sleep disorder, rendered as SVG circles via a `for..of` loop.

YYuXIA_2025
78% match