Skip to main content
SimilarExport ZIP
100%

sleep vs concenration

✓ Published0🌍 Public
Ssarikakannikanti@gmail.com
Last edited Apr 6, 2025
Created on Apr 5, 2025
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

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
82% 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
82% match
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
78% match
Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj
76% match
Loading thumbnail…

barplot

This bar chart visualizes sleep duration for individuals, with each bar representing a person’s name and the bar height corresponding to their hours of sleep. The visualization uses d3.csv to load data from a remote ICE5dataset, d3.scaleBand for the x-axis categories, and d3.scaleLinear for the y-axis. Bars are rendered as SVG rectangles with a hover effect that changes their fill to orange via d3.select, while d3.axisBottom and d3.axisLeft generate the labeled axes.

VVignesh Nallamothu
76% match
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
75% match
Loading thumbnail…

“Sleep disorders % by stress — 100% stacked bar”

This chart displays the percentage distribution of sleep disorders (None, Insomnia, Sleep Apnea) across low, medium, and high stress categories, with each bar representing a 100% stacked composition. The visualization uses D3 v7’s `d3.rollup` for data aggregation, `d3.stack` for layer generation, and SVG for rendering. It reads from a CSV file containing lifestyle and health metrics, binarizes stress levels into three groups, and employs an ordinal color scale with a custom tooltip for interactive detail inspection.

Ccsabavath@wpi.edu
75% match
Loading thumbnail…

SleepData

This visualization compares recommended sleep hours against average reported sleep hours for students from kindergarten through 12th grade. Each grade level displays two horizontal bars, with teal representing averaged sleep and orange representing needed sleep, alongside a legend and axis labels. The chart uses React with D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `d3.schemeSet2` for color encoding. The data is embedded as JSON and rendered as SVG rectangles within a fixed 960×500 viewport.

Jjesperenglund92
75% match