Fork of sleep pattern vs depression

Fork of grades vs sleep patterns

This example visualizes student grade distributions across sleep patterns using interactive pie, bar, and grouped bar charts. The SVG-based visualization uses D3 v7 APIs including `d3.rollup` for data aggregation, `d3.pie` and `d3.arc` for the donut chart, and `d3.scaleBand` with `d3.axisBottom` for bar rendering. Users switch between chart types via buttons, while mouseover events trigger tooltips displaying category counts. Data comes from a CSV file containing student grades and mental health information.

84% match

Fork of grades vs sleep

This vizhub fork displays a grouped bar chart of student grades (A, B, C, D) across different sleep pattern categories. The chart shows the number of students in each grade category for each sleep pattern, with color-encoded bars for each grade level. Built with D3 v7, the code uses `d3.csv` to load a Gist-hosted dataset, `d3.rollups` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeSet2` for color encoding. The visualization includes axis labels, a title, and a tooltip on mouseover.

77% match

fork of Finishing Touches

This visualization shows a 100% stacked bar chart of sleep disorder prevalence across stress levels, using data from a sleep health and lifestyle dataset. The chart displays the proportion of people with no disorder, insomnia, or sleep apnea, with a gray and two blue color scheme to distinguish healthy from disordered sleep. Users can filter by gender and view only disorder categories through dropdown menus, while hovering reveals exact percentages via a tooltip. The implementation uses D3 v7 with d3.stack, d3.scaleOrdinal, and d3.axisBottom/Left to render the SVG with interactive animation.

Ccsabavath@wpi.edu

76% match

grades

This visualization presents a side-by-side bar chart comparing student grades across different sleep patterns, with the bars for each sleep category grouped by grade level. The chart is built using D3.js v7, which loads a CSV file from a GitHub gist, groups the data with the `d3.rollups` API, and scales using `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip that displays the sleep pattern, grade, and count, with the visualization rendered as SVG elements.

76% match

Fork of Week 7 – Project Momentum: Color assignment.

This visualization displays the prevalence of sleep disorders (None, Insomnia, Sleep Apnea) as a 100% stacked bar chart, segmented by binned stress levels (Low, Medium, High) and filterable by gender. A legend allows users to toggle categories on or off, with hover and click interactions updating the display. The chart uses D3 v7’s `d3.stack()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` to compute and color the proportional segments, with smooth transitions applied to bar heights via `transition().duration()`. Data comes from a CSV file on sleep health and lifestyle.

Ccsabavath@wpi.edu

grades vs sleep

This grouped bar chart visualizes how students' grades (A, B, C, D, E) correlate with their self-reported sleep patterns (e.g., Good, Fair, Poor). The chart uses a D3.js v7 SVG renderer with `d3.scaleBand` for the categorical axes and `d3.scaleOrdinal` with `d3.schemeSet2` for color. It reads a CSV from a Gist, aggregates counts with `d3.rollups`, and displays a tooltip on hover.

Average Grade by Mental Health Status

This visualization shows the distribution of student anxiety levels as a pie chart, with each slice representing the proportion of students at a specific anxiety level. It uses d3.pie() and d3.arc() to render the pie, d3.scaleOrdinal() to assign colors, and d3.rollup() to count students in each anxiety category. Hovering displays a tooltip with the count and percentage, while clicking a slice populates a list of students in that anxiety level, showing their age, gender, sleep patterns, and stress levels. The data comes from a CSV file loaded via d3.csv().

Ddeekshakondam@gmail.com

Fork of Mental Health Survey Pie Chart Project Momentum Color

This interactive pie chart visualizes mental health survey data, showing how a selected metric (such as depression or academic pressure) varies across a chosen attribute like gender or academic year, filtered by university. Users adjust three dropdowns to explore different combinations. The visualization uses D3.js version 7.8.5, employing the `pie()` and `arc()` generators to create slices, `rollups()` for aggregation, and SVG elements for rendering. The code reads from the provided MentalHealthSurvey.csv file and updates the chart dynamically based on user selections.

JJoe Rozman