Skip to main content
SimilarExport ZIP
100%

Content Classification Frequency

✓ Published1🌍 Public
GGracedata
Last edited Dec 16, 2020
Created on Dec 12, 2020

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.

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 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
100% 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
88% 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
86% 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
83% match
Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado
75% match
Loading thumbnail…

activity 7.2

This stacked bar chart visualizes how movie ratings are distributed across genres, with each bar segment representing the proportion of films falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.stack to generate the stacked data, d3.scaleOrdinal for color encoding, and d3.scaleBand with d3.scaleLinear for positioning. Data comes from a CSV file, and the SVG rendering includes a custom legend and axis labels.

Rrushithareddyy
72% match
Loading thumbnail…

activity-6-a-2

A stacked bar chart shows the distribution of food ratings across five categories, from "Below 5.0" to "Above 8.5," for six food items. Each bar segment’s length encodes the proportion of ratings, with hover interactions displaying exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles, with data loaded from a CSV file and a custom color scale mapping each rating category.

SSathishvepuri143@gmail.com
72% match
Loading thumbnail…

Untitled

This stacked bar chart displays eye color frequencies across four hair color categories. The visualization uses d3.csv to load the dataset, d3.stack() to compute stacked segments, and d3.scaleBand/d3.scaleLinear for axes. Each bar segment is colored via a d3.scaleOrdinal palette, with a legend added in the second implementation. The SVG rendering relies on d3.axisBottom, d3.axisLeft, and nested data joins to append rectangles per subgroup.

CCo10
72% match