Skip to content

Commit 75fa912

Browse files
committed
[wip] milestone2 wrapped initially
1 parent b51376e commit 75fa912

6 files changed

Lines changed: 1857 additions & 444 deletions

File tree

README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ Our approach is still original in the context of this project because we want to
7676

7777
**10% of the final grade**
7878

79+
For Milestone 2, we refocused the project around a YRBS-based teen health profile: mental wellbeing, daily routines, school support, substance use, and relationship safety viewed together rather than as isolated topics.
80+
81+
- [Milestone 2 write-up](milestone2_writeup.md)
82+
- [Prototype website](milestone2/index.html)
83+
- [YRBS teen health profile analysis](yrbs_2023/teen_health_profile_summary.md)
84+
85+
The current prototype uses the 2023 national YRBS as the primary dataset and keeps the Teen Phone Addiction dataset as secondary context. The main new design direction is an interactive risk-stack view showing how weighted poor-current-mental-health prevalence changes as sleep, activity, bullying, substance-use, and school-connectedness risks accumulate, plus companion risk-gap views for individual components and relationship-safety indicators.
86+
7987

8088
## Milestone 3 (29th May, 5pm)
8189

milestone2/index.html

Lines changed: 95 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,71 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Teen Health Dashboard</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Teen Health Profile</title>
67
<link rel="stylesheet" href="style.css">
78
<script src="https://d3js.org/d3.v7.min.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
99
</head>
1010
<body>
1111

1212
<header>
13-
<h1>Teen Health Profile Dashboard</h1>
14-
<p class="subtitle">2023 CDC Youth Risk Behavior Survey &amp; Teen Phone Addiction Dataset</p>
13+
<p class="eyebrow">2023 CDC Youth Risk Behavior Survey</p>
14+
<h1>Teen Health Profile</h1>
15+
<p class="subtitle">A guided walk from survey orientation to national signals, subgroup profiles, grade shifts, risk accumulation, relationship safety, and phone context.</p>
1516
</header>
1617

17-
<!-- ═══════════════════════════════════════════════════
18-
SECTION 1: YRBS DEMOGRAPHICS
19-
═══════════════════════════════════════════════════ -->
18+
<!-- SECTION 1: ORIENTATION -->
2019
<section id="section-demographics">
21-
<h2>Demographics Overview</h2>
22-
<p class="section-desc">Distribution of the 20,103 surveyed students by age, sex, grade, and race/ethnicity.</p>
20+
<p class="section-kicker">1. Orientation</p>
21+
<h2>Who Are We Looking At?</h2>
22+
<p class="section-desc">Sample composition of the 20,103 surveyed students. These bars show raw survey rows; health estimates below use the CDC survey weight.</p>
2323
<div id="demo-charts" class="chart-row"></div>
2424
</section>
2525

26-
<!-- ═══════════════════════════════════════════════════
27-
SECTION 2: HEALTH DOMAIN RADAR
28-
═══════════════════════════════════════════════════ -->
29-
<section id="section-radar">
30-
<h2>Health Domain Radar</h2>
31-
<p class="section-desc">Five health dimensions compared across demographic groups. Each axis shows the % of students with a positive / protective outcome.</p>
32-
<div id="radar-controls" class="controls">
33-
<label>Compare by:</label>
34-
<select id="radar-group-select">
35-
<option value="sex">Sex</option>
36-
<option value="grade">Grade</option>
37-
<option value="age">Age</option>
38-
<option value="race">Race / Ethnicity</option>
39-
</select>
26+
<!-- SECTION 2: SHALLOW NATIONAL PROFILE -->
27+
<section id="section-findings">
28+
<p class="section-kicker">2. Shallow Profile</p>
29+
<h2>What Are The Obvious Teen-Health Signals?</h2>
30+
<p class="section-desc">Weighted national YRBS estimates show that teen health is not one issue: mental health, sleep, activity, bullying, substance use, support, and relationship safety all appear in the first scan.</p>
31+
<div class="finding-grid">
32+
<article class="finding-card">
33+
<span class="finding-domain">Mental health</span>
34+
<span class="finding-value">28.54%</span>
35+
<span class="finding-label">reported poor current mental health</span>
36+
</article>
37+
<article class="finding-card">
38+
<span class="finding-domain">Daily routines</span>
39+
<span class="finding-value">23.20%</span>
40+
<span class="finding-label">got 8 or more hours of sleep</span>
41+
</article>
42+
<article class="finding-card">
43+
<span class="finding-domain">Activity</span>
44+
<span class="finding-value">46.32%</span>
45+
<span class="finding-label">were active on at least 5 days</span>
46+
</article>
47+
<article class="finding-card">
48+
<span class="finding-domain">Safety</span>
49+
<span class="finding-value">19.24%</span>
50+
<span class="finding-label">were bullied at school</span>
51+
</article>
52+
<article class="finding-card">
53+
<span class="finding-domain">Substance use</span>
54+
<span class="finding-value">22.10%</span>
55+
<span class="finding-label">reported current alcohol use</span>
56+
</article>
57+
<article class="finding-card">
58+
<span class="finding-domain">Relationship safety</span>
59+
<span class="finding-value">11.37%</span>
60+
<span class="finding-label">reported sexual violence at least once</span>
61+
</article>
4062
</div>
41-
<div id="radar-toggles"></div>
42-
<div id="radar-chart"></div>
4363
</section>
4464

45-
<!-- ═══════════════════════════════════════════════════
46-
SECTION 3: YRBS GROUPED BAR (existing, polished)
47-
═══════════════════════════════════════════════════ -->
65+
<!-- SECTION 3: FIRST COMPARISON -->
4866
<section id="section-bar">
49-
<h2>Health Indicators by Subgroup</h2>
50-
<p class="section-desc">All six indicators at once. Each dot is one group; the line shows the range across groups. Hover for exact values.</p>
67+
<p class="section-kicker">3. First Comparison</p>
68+
<h2>Whose Profile Looks Different?</h2>
69+
<p class="section-desc">Weighted prevalence of six concerns across a selected demographic dimension. The useful pattern is the profile shape, not a single healthy/unhealthy ranking.</p>
5170
<div class="controls">
5271
<label>Group by:</label>
5372
<select id="group-select">
@@ -60,38 +79,57 @@ <h2>Health Indicators by Subgroup</h2>
6079
<div id="bar-chart"></div>
6180
</section>
6281

63-
<!-- ═══════════════════════════════════════════════════
64-
SECTION 4: PHONE — HEATMAP
65-
═══════════════════════════════════════════════════ -->
66-
<section id="section-heatmap">
67-
<h2>Phone Addiction &amp; Wellbeing Correlations</h2>
68-
<p class="section-desc">Pearson correlation of each wellbeing metric with phone addiction level. Red = higher addiction associated with worse outcome; green = better. Sorted by strength.</p>
69-
<div id="heatmap-chart"></div>
82+
<!-- SECTION 4: GRADE PROFILE SHIFT -->
83+
<section id="section-grade-shift">
84+
<p class="section-kicker">4. Profile Shift</p>
85+
<h2>How Does Health Change Across High School?</h2>
86+
<p class="section-desc">Grade is more than a demographic filter: routines, bullying, school connection, substance use, and mental health move in different directions from 9th to 12th grade.</p>
87+
<div id="grade-shift-summary" class="grade-summary-strip"></div>
88+
<div id="grade-shift-chart"></div>
7089
</section>
7190

72-
<!-- ═══════════════════════════════════════════════════
73-
SECTION 5: PHONE — SCATTER
74-
═══════════════════════════════════════════════════ -->
75-
<section id="section-scatter">
76-
<h2>Daily Phone Usage vs. Anxiety Level</h2>
77-
<p class="section-desc">Each dot is one student. Color indicates addiction level. Hover for details.</p>
78-
<div id="scatter-chart"></div>
91+
<!-- SECTION 5: INDIVIDUAL RISK ROLE -->
92+
<section id="section-risk-role">
93+
<p class="section-kicker">5. Individual Risk Role</p>
94+
<h2>Which Factors Separate Mental Health Most?</h2>
95+
<p class="section-desc">Each bar shows the weighted poor-current-mental-health gap between students with and without the selected risk. Click a row to include or exclude that risk in the stack below.</p>
96+
<div id="risk-role-chart"></div>
7997
</section>
8098

81-
<!-- ═══════════════════════════════════════════════════
82-
SECTION 6: PHONE — legacy charts (kept)
83-
═══════════════════════════════════════════════════ -->
84-
<section id="section-phone-legacy">
85-
<h2>Phone Addiction — Additional Charts</h2>
86-
<div id="summary-phone"></div>
87-
<div class="controls">
88-
<label>View:</label>
89-
<select id="phone-option">
90-
<option value="A">Addiction level vs. avg daily usage</option>
91-
<option value="B">Usage group vs. avg anxiety</option>
92-
</select>
99+
<!-- SECTION 6: RISK STACK -->
100+
<section id="section-risk-stack">
101+
<p class="section-kicker">6. Risk Stack</p>
102+
<h2>What Happens When Problems Accumulate?</h2>
103+
<p class="section-desc">The same selected risks are counted together. The chart uses complete cases for the active risk fields and reports the valid row count.</p>
104+
<div id="risk-selector" class="risk-selector" aria-label="Risk components"></div>
105+
<div id="risk-stack-chart"></div>
106+
</section>
107+
108+
<!-- SECTION 7: SEXUAL HEALTH -->
109+
<section id="section-sexual-health">
110+
<p class="section-kicker">7. Sexual Health</p>
111+
<h2>How Does Sexual Health Fit Responsibly?</h2>
112+
<p class="section-desc">Sexual health belongs in the teen-health profile when it is framed around safety, consent, prevention, testing, and access to care rather than treating sexual activity itself as a risk.</p>
113+
<div id="sexual-summary" class="sexual-summary-strip"></div>
114+
<div class="sexual-layout">
115+
<div class="sexual-panel">
116+
<h3>Relationship Safety and Mental Health</h3>
117+
<div id="sexual-gap-chart"></div>
118+
</div>
119+
<div class="sexual-panel">
120+
<h3>Prevention and Agency Among Currently Sexually Active Students</h3>
121+
<div id="sexual-prevention-chart"></div>
122+
</div>
93123
</div>
94-
<div id="bar-chart-phone"></div>
124+
</section>
125+
126+
<!-- SECTION 8: PHONE CONTEXT -->
127+
<section id="section-heatmap">
128+
<p class="section-kicker">8. Phone Context</p>
129+
<h2>Is Teen Health Just A Digital-Behavior Story?</h2>
130+
<p class="section-desc">Phone-use correlations are useful context, but the YRBS story shows teen health is broader than a single digital-behavior explanation.</p>
131+
<div id="phone-corr-summary" class="phone-summary-strip"></div>
132+
<div id="heatmap-chart"></div>
95133
</section>
96134

97135
<script src="main.js"></script>

0 commit comments

Comments
 (0)