Skip to main content
SimilarExport ZIP
100%

Subjective Stress vs. Life Categorie (Percentage Value)

✓ Published0🌍 Public
GGracedata
Last edited Dec 17, 2020
Created on Dec 17, 2020

This stacked bar chart shows the percentage distribution of subjective stress levels across seven life categories for a selected session, with an option to sort categories from most to least stressed. Stress levels are encoded as ordinal color segments using a five-step green scale. The D3 v6 code loads CSV data from a GitHub repository, uses `d3.stack()` and `d3.scaleOrdinal` for stacking and coloring, and provides interactive filtering via a dropdown and checkbox. Transitions animate bar updates using `transition.attr`, and a `d3.legendColor` legend clarifies the stress scale.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Subjective Stress vs. Life Categories

This interactive stacked bar chart visualizes how subjective stress levels vary across different life categories, such as content classification, for a selected session. Users can choose a session from a dropdown and optionally sort the bars by total descending stress. The chart uses D3.js v6 and the d3-legend library, fetching its data from a remote CSV file. It renders as an SVG with smooth transitions when updating the view or sorting, with a color scale from dark to light green representing different stress levels.

GGracedata
95% match
Loading thumbnail…

Content Classification Frequency

This visualization shows how subjective stress levels are distributed across seven life categories for each session, using stacked horizontal bars colored by stress intensity. Users select a session from a dropdown and can optionally sort categories by severity. The chart is built with D3 v6, using `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear`, with data loaded via `d3.csv` from a GitHub-hosted CSV file. Animated transitions update the bars smoothly, and a `d3.legendColor` legend maps stress levels to a green color scale.

Yyuxinzhou0312
90% match
Loading thumbnail…

Content Classification

This stacked bar chart visualizes how stress perception decomposes across seven content classification categories, with each bar segmented by severity levels from a CSV dataset. A dropdown menu switches between experimental sessions, while a checkbox toggles sorting by total magnitude versus classification order. The visualization uses D3 v6 scales (d3.scaleBand, d3.scaleLinear, d3.scaleOrdinal), d3.stack for layering, and d3.legendColor to display a severity legend, with animated transitions on axes and rectangles.

Yyuxinzhou0312
81% 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
79% match
Loading thumbnail…

Final project

This bar chart shows the relationship between students' self-reported stress levels and their average grades, with the data grouped into Low, Medium, and High stress categories. The chart uses D3 v7 to load a CSV file, group the data with `d3.group`, and calculate means with `d3.mean`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are rendered as SVG rectangles that change color on hover.

Ssarikakannikanti@gmail.com
75% match
Loading thumbnail…

activity 7

This pie chart visualizes the distribution of stress levels among students, categorizing responses as Low, Moderate, High, or Very High. It uses d3.pie and d3.arc to generate the pie slices, d3.rollups to aggregate the CSV source data, and d3.scaleOrdinal with d3.schemeCategory10 for coloring. A legend and white stroke separators clarify the categories, with d3.arc centroid positioning for labels. The visualization renders as static SVG.

Mmanasapolisetty13@gmail.com
74% match
Loading thumbnail…

two bar charts

This visualization shows the distribution of current student grades (A, B, C, D, F) across three stress levels (Low, Medium, High) using a single bar chart. Users can click legend items to filter the display to a specific grade, highlighting the selected legend entry and updating the bars accordingly. The chart loads CSV data via d3.csv, aggregates counts and averages (study hours and social media platforms) per grade-stress combination, and renders SVG bars with a tooltip. Built with D3 v7, it uses d3.mean for aggregation and d3.select for DOM manipulation.

Ddeekshakondam@gmail.com
74% match
Loading thumbnail…

final project

This bar chart visualizes the relationship between students’ stress levels and their average grades, grouping data by low, medium, and high stress. The visualization uses D3 v7 to load a CSV file from a GitHub gist, aggregate averages with `d3.rollup`, and render the results as SVG rectangles. It employs `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart’s rotating axis labels and centered annotations clarify the stress-level categories and grade values.

Ssarikakannikanti@gmail.com
74% match