Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mental Health Survey Pie Chart Project Momentum 3

Public visualization

Viewing a saved revision (read-only)

fa750ba8e6b14b8f9bf2ceba29db5cdb

Mental Health Survey Pie Chart Project Momentum 3

0 stars1🌍 Public
JJoe Rozman
Last edited Nov 16, 2024
Created on Nov 15, 2024

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.

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