Skip to main content
Log in
G

Gracedata

@graceliudata·5 public 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.

Dec 17, 2020
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.

Dec 17, 2020
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.

Dec 16, 2020
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.

Dec 16, 2020
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.

Dec 16, 2020