Skip to main content
SimilarExport ZIP
100%

Fork of grades vs sleep patterns

✓ Published0🌍 Public
Ssarikakannikanti@gmail.com
Last edited Apr 5, 2025
Created on Apr 5, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ssarikakannikanti@gmail.com
90% match
Loading thumbnail…

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.

Ssarikakannikanti@gmail.com
88% match
Loading thumbnail…

Fork of sleep pattern vs depression

This pie chart visualizes the distribution of depression scores across sleep-pattern categories, showing how total depression values are partitioned into groups defined by hours of sleep. The visualization uses D3 v7’s `pie`, `arc`, `scaleOrdinal`, and `rollup` functions to aggregate and encode the data, with interactive hover tooltips and a static legend displaying category percentages. The underlying data comes from a CSV file of student grades and mental health, loaded via `d3.csv`.

Ssarikakannikanti@gmail.com
84% match
Loading thumbnail…

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.

Ssarikakannikanti@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This interactive pie chart visualizes student mental health and academic data, letting the viewer examine the distribution of records across categories like stress levels, depression, relationship status, and grades. Selecting a different attribute from the dropdown redraws the chart based on precomputed counts from the CSV data. Built with D3 v7, the example uses `d3.csv`, `d3.rollup`, `d3.pie`, and `d3.arc` to generate SVG paths and labels, with hover interactions that expand a slice and trigger a tooltip. A categorical color scale, `d3.scaleOrdinal`, with the `d3.schemeTableau10` palette colors each segment.

Jjayakrishnanallani5@gmail.com
79% match
Loading thumbnail…

pie charts

Two pie charts compare the distribution of student grades from the previous term versus the current term. Each donut chart segment is colored by the dominant stress level (high, medium, low), with the percentage label displayed on each slice. Clicking a segment reveals a tooltip with the student count, average study hours, and stress level. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `.join()` methods on SVG paths, with data loaded from a CSV file and a custom opacity-transition tooltip.

Ddeekshakondam@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

A pie chart displays the distribution of 110 students across five grade categories (A through E), with labeled slices showing category counts and a legend describing letter-grade ranges. Built with D3.js v7, the visualization loads a CSV file, uses `d3.rollup` to aggregate student counts by category, and employs `d3.pie` and `d3.arc` to generate SVG paths. A color scale colors each slice, while labels and legends are added programmatically to the SVG.

Mmadalahyndavi123@gmail.com
78% match
Loading thumbnail…

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
77% match