Skip to main content
SimilarExport ZIP
100%

Content Classification Frequency

✓ Published1🌍 Public
Yyuxinzhou0312
Last edited Dec 17, 2020
Created on Dec 17, 2020

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.

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
91% 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
90% match
Loading thumbnail…

Subjective Stress vs. Life Categorie (Percentage Value)

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.

GGracedata
90% match
Loading thumbnail…

Content Classification Frequency

This visualization displays stacked bar charts showing the frequency of content classifications across different sessions, with severity levels color-coded from dark to light green. A dropdown menu allows selection of a specific session, while a checkbox reorders the bars by the most severe category. The interactive SVG chart uses D3 v6 APIs including `d3.stack` for stacking, `d3.scaleBand` for the x-axis, and `d3.legendColor` for the legend. Data comes from a CSV file hosted on GitHub, and updates are animated with D3 transitions.

GGracedata
83% match
Loading thumbnail…

Content Classification Frequency

This visualization displays stacked bar charts showing the frequency of content classifications across different sessions, with severity levels color-coded from dark to light green. A dropdown menu allows selection of a specific session, while a checkbox reorders the bars by the most severe category. The interactive SVG chart uses D3 v6 APIs including `d3.stack` for stacking, `d3.scaleBand` for the x-axis, and `d3.legendColor` for the legend. Data comes from a CSV file hosted on GitHub, and updates are animated with D3 transitions.

GGracedata
83% 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…

Content Classification

This interactive stacked bar chart displays the breakdown of seven content classification categories per session, sourced from a CSV file. A dropdown menu selects the session, and a checkbox toggles sorting by total value. Built with React and D3.js v6, the visualization uses `d3.csv` for data loading, `d3.stack` for layering, `scaleBand` for categories, and SVG transitions for animated updates.

GGracedata
78% 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
75% match