Skip to main content
SimilarExport ZIP
100%

Fork of grades vs sleep

✓ Published0🌍 Public
Ssarikakannikanti@gmail.com
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

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
89% 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
86% 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…

Fork of Fork 11

This bar chart visualizes the relationship between daily water consumption and average sleep quality, with bars sorted by sleep quality in ascending order. The visualization uses D3.js v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG chart. Data is loaded via `d3.tsv` from a remote CSV file, then processed with `d3.rollups` to group and average sleep quality by water consumption category. Interactive tooltips appear on hover, displaying the specific water consumption level and corresponding sleep quality score.

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

sleep vs concenration

This grouped bar chart compares sleep patterns against concentration difficulty levels, showing the number of students for each combination. The data comes from a CSV file on student grades and mental health, loaded via `d3.csv`. The visualization uses `d3.rollups` to aggregate counts by two categorical dimensions, then renders the nested groups with `d3.scaleBand` for both axes and `d3.scaleLinear` for the y-axis. Colors are assigned using `d3.scaleOrdinal` with `d3.schemeTableau10`. SVG rectangles display the bars, with hover tooltips showing exact counts for each sleep and concentration category.

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