Skip to main content
SimilarExport ZIP
100%

Content Classification

✓ Published1🌍 Public
Yyuxinzhou0312
Last edited Dec 16, 2020
Created on Dec 5, 2020
Forked from Hello VizHub

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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 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
86% 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
86% 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
85% match
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
83% 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
81% match
Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes sociodemographic factors and discrimination impacts on Perceived Stress Scale (PSS) scores, with lines colored by event type. Users can drag axes to reorder dimensions. The visualization uses d3.v3 with SVG rendering and animation, featuring ordinal color scales, linear scales for each dimension, and d3.behavior.drag for axis interaction. Data is loaded from a CSV file containing categorical variables like sex, race, income, and education.

Mmuzzheng
74% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays perceived stress scores (pss) across different racial/ethnic groups, with each bar representing an individual response. It uses D3 v5 with SVG rendering, applying `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis grouping. The chart customizes axes by removing tick lines and domains, and formats x-axis labels with `d3.format`. Data comes from a CSV file containing survey responses with race categories and stress scores.

Mmuzzheng
74% match