Skip to main content
SimilarExport ZIP
100%

Mental Health Survey Pie Chart Project Momentum 5

✓ Published0🌍 Public
JJoe Rozman
Last edited Nov 26, 2024
Created on Nov 26, 2024

This interactive pie chart visualizes mental health survey data, showing the average of a selected metric (e.g., study satisfaction, anxiety) across categories of a chosen attribute (e.g., academic year, gender), with an optional filter for university. It uses the D3.js library to build the pie chart with the `pie` and `arc` generators, and employs `rollups` to compute group means. Dropdown menus and a reset button control the selections, while hover interactions display tooltips with the precise average value for each slice.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations

MIT Licensed

Similar vizzes

Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 4

This interactive pie chart visualizes mental health survey data, showing average scores of selected well-being metrics across categorical attributes like academic year, gender, or university. Users filter the dataset using dropdown menus for attribute, metric, and university, with a reset button restoring defaults. The visualization uses D3.js’s `rollups` and `pie` functions to aggregate and generate arcs, while `arc` and `schemeCategory10` style the slices. Hovering reveals tooltips with precise values, and the chart reads from a local CSV file.

JJoe Rozman
97% match
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum

This interactive pie chart explores mental health survey data, allowing users to select an attribute (such as academic year or gender) and a metric (like depression or anxiety) to visualize the average score across categories. The chart updates dynamically using D3’s pie and arc generators, with dropdown menus controlling the selections. Data is aggregated via rollups to compute mean values, and a color-coded legend displays each category’s label and average. The visualization uses the D3 library and is styled with custom CSS for the SVG and selector elements.

JJoe Rozman
97% match
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 3

This interactive pie chart explores mental health survey data, letting users filter by university and toggle between demographic attributes and well-being metrics. The visualization displays average metric scores as proportional arc slices, with hover tooltips revealing exact values. Built with D3.js, it uses `d3.pie` and `d3.arc` to generate paths, `d3.rollups` for data aggregation, and `schemeCategory10` for color encoding. Dropdown menus control attribute, metric, and university selection, while CSS transitions provide visual feedback on hover.

JJoe Rozman
96% match
Loading thumbnail…

Fork of Mental Health Survey Pie Chart Project Momentum Color

This interactive pie chart visualizes mental health survey data, showing how a selected metric (such as depression or academic pressure) varies across a chosen attribute like gender or academic year, filtered by university. Users adjust three dropdowns to explore different combinations. The visualization uses D3.js version 7.8.5, employing the `pie()` and `arc()` generators to create slices, `rollups()` for aggregation, and SVG elements for rendering. The code reads from the provided MentalHealthSurvey.csv file and updates the chart dynamically based on user selections.

JJoe Rozman
94% match
Loading thumbnail…

Mental Health Survey Pie Chart Project Momentum 2

This interactive pie chart visualizes mental health survey data from Pakistani universities, allowing users to explore how categorical demographics relate to self-reported well-being metrics. The visualization provides dropdown menus to filter by university, select a demographic attribute, and choose a psychological measure. The chart displays the average metric value for each category segment, with a legend showing labels and computed means. Built with D3.js version 7.8.5, the implementation uses the `pie` and `arc` functions from the d3-shape module, along with `rollups` for data aggregation and `schemeCategory10` for color assignment based on the CSV dataset.

JJoe Rozman
92% match
Loading thumbnail…

Mental Health Survey Pie Chart

This visualization shows the distribution of survey respondents across academic years using a pie chart, with each slice color-coded using `d3.schemeCategory10`. The code groups the mental health survey data by academic year through `d3.rollups`, sorts the categories, and renders the chart with `d3.pie` and `d3.arc` generators. A legend positioned at the top-right maps each color swatch to its corresponding academic year label. The SVG elements are sized dynamically to the container’s dimensions via `container.clientWidth` and `container.clientHeight`.

JJoe Rozman
89% match
Loading thumbnail…

Average Grade by Mental Health Status

This visualization shows the distribution of student anxiety levels as a pie chart, with each slice representing the proportion of students at a specific anxiety level. It uses d3.pie() and d3.arc() to render the pie, d3.scaleOrdinal() to assign colors, and d3.rollup() to count students in each anxiety category. Hovering displays a tooltip with the count and percentage, while clicking a slice populates a list of students in that anxiety level, showing their age, gender, sleep patterns, and stress levels. The data comes from a CSV file loaded via d3.csv().

Ddeekshakondam@gmail.com
80% match
Loading thumbnail…

Pie Chart - Deeksha Kondam

This pie chart visualizes the distribution of students’ self-reported stress levels, bucketed into Low, Medium, and High categories. A dataset of student grades and mental health is loaded via `d3.csv` from a GitHub gist, and each numerical stress score is counted into its respective bucket. The chart uses `d3.pie()` to compute the arcs and `d3.arc()` with an inner radius of zero to render the slices as SVG paths. An animation, driven by `transition.attrTween` and `d3.interpolate`, expands the pie from zero angle on load, while a legend, color-coded via `d3.scaleOrdinal` with `d3.schemeSet2`, identifies each category.

Ddeekshakondam@gmail.com
76% match