Skip to content

Commit 689667b

Browse files
Christosko3Christosko3
authored
Merge pull request #2 from com-480-data-visualization/stos
graphs m3 social media dataset
2 parents 01ed6e8 + b23e1e1 commit 689667b

6 files changed

Lines changed: 2029 additions & 2 deletions

File tree

‎milestone2/LinkedIn_logo.png‎

10.1 KB
Loading

‎milestone2/data/countries-110m.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎milestone2/data/social_media_addiction.csv‎

Lines changed: 706 additions & 0 deletions
Large diffs are not rendered by default.

‎milestone2/index.html‎

Lines changed: 111 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,29 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Teen Health Profile</title>
7-
<link rel="stylesheet" href="style.css?v=20260417d">
7+
<link rel="stylesheet" href="style.css?v=20260512b">
88
<script src="d3.v7.min.js?v=20260417c" defer></script>
9-
<script src="main.js?v=20260417d" defer></script>
9+
<script src="https://cdn.jsdelivr.net/npm/topojson@3" defer></script>
10+
<script src="https://cdn.jsdelivr.net/npm/d3-sankey@0" defer></script>
11+
<script src="main.js?v=20260512b" defer></script>
1012
</head>
1113
<body>
1214

15+
<!-- Reusable SVG filter: traces the source alpha with a black outline -->
16+
<svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute">
17+
<defs>
18+
<filter id="snapchat-outline" x="-15%" y="-15%" width="130%" height="130%">
19+
<feMorphology in="SourceAlpha" operator="dilate" radius="1" result="dilated"/>
20+
<feFlood flood-color="#000" result="black"/>
21+
<feComposite in="black" in2="dilated" operator="in" result="outline"/>
22+
<feMerge>
23+
<feMergeNode in="outline"/>
24+
<feMergeNode in="SourceGraphic"/>
25+
</feMerge>
26+
</filter>
27+
</defs>
28+
</svg>
29+
1330
<header>
1431
<p class="eyebrow">2023 CDC Youth Risk Behavior Survey</p>
1532
<h1>Teen Health Profile</h1>
@@ -163,5 +180,97 @@ <h2>Is Teen Health Just A Digital-Behavior Story?</h2>
163180
<div id="phone-corr-summary" class="phone-summary-strip"></div>
164181
<div id="heatmap-chart"></div>
165182
</section>
183+
184+
<!-- DATASET TRANSITION -->
185+
<section id="section-sma-intro">
186+
<p class="section-kicker">Switching Datasets</p>
187+
<h2>A Second Lens: Zoom on Social Media Habits</h2>
188+
<p class="section-desc">From here, the analysis switches to a smaller, globally-sourced survey: 705 university-age students from 110 countries answering a focused questionnaire on social-media habits, sleep, mental health, and academic impact. The chart below shows how that cohort is composed : pick any two of gender, age, academic level, or relationship status to see how the sample splits between them. The sample consists mainly of undergraduate women (19-20) and graduate men (21-22), but this composition does not compromise the analysis.</p>
189+
<div class="orientation-layout">
190+
<aside class="survey-passport">
191+
<div class="passport-label">Dataset Passport</div>
192+
<div class="passport-title">Students' Social Media Addiction</div>
193+
<div class="passport-metrics">
194+
<div class="passport-metric">
195+
<span class="passport-value">705</span>
196+
<span class="passport-caption">student rows</span>
197+
</div>
198+
<div class="passport-metric">
199+
<span class="passport-value">13</span>
200+
<span class="passport-caption">variables</span>
201+
</div>
202+
<div class="passport-metric">
203+
<span class="passport-value">110</span>
204+
<span class="passport-caption">countries represented</span>
205+
</div>
206+
<div class="passport-metric">
207+
<span class="passport-value">12</span>
208+
<span class="passport-caption">social media platforms tracked</span>
209+
</div>
210+
</div>
211+
<p class="passport-note">An unweighted convenience sample — each response counts equally — covering daily usage, sleep, mental health, conflicts, and self-reported academic impact.</p>
212+
</aside>
213+
<div class="association-panel">
214+
<div class="association-toolbar">
215+
<div class="controls association-controls">
216+
<label>Connect:</label>
217+
<select id="sma-flow-left" aria-label="Left demographic dimension"></select>
218+
<span class="flow-arrow">to</span>
219+
<select id="sma-flow-right" aria-label="Right demographic dimension"></select>
220+
<button id="sma-flow-swap" class="flow-swap" type="button">Swap</button>
221+
</div>
222+
</div>
223+
<div id="sma-flow-chart">
224+
<div class="loading-panel">Loading demographic composition...</div>
225+
</div>
226+
</div>
227+
</div>
228+
</section>
229+
230+
<!-- SECTION 9: GLOBAL SOCIAL MEDIA EXPOSURE -->
231+
<section id="section-global-addiction">
232+
<p class="section-kicker">9. Global Perspective</p>
233+
<h2>Map of the most used social media platform around the globe and average time spent online</h2>
234+
<p class="section-desc">Each country is shaded by the average hours its students spend on social media every day, with the most-used platform tagged on top. Hatched countries hold too few respondents to be reliable. Click any platform in the legend to see where it's usage percentage across countries.</p>
235+
<div id="world-map-container" style="width: 100%; height: 700px; position: relative;">
236+
<svg id="world-map"></svg>
237+
</div>
238+
<div id="addiction-legend" class="addiction-legend"></div>
239+
</section>
240+
241+
<!-- SECTION 10: PLATFORM PROFILE RADAR -->
242+
<section id="section-platform-radar">
243+
<p class="section-kicker">10. Platform Profile</p>
244+
<h2>Which Platforms Look Most Problematic?</h2>
245+
<p class="section-desc">Different platforms produce different user profiles. A typical TikTok user looks nothing like a typical LinkedIn user once you place them side by side on the same six metrics. The sleep axis is inverted so that, as with the others, distance from the centre always means worse outcomes. Toggle a pill below to add or remove a platform from the comparison.</p>
246+
<div id="platform-radar-toggles" class="platform-radar-toggles"></div>
247+
<div id="platform-radar-chart"></div>
248+
<p class="section-takeaway">
249+
The shapes carry the message. TikTok and Instagram users stretch outward on nearly every axis at once : high usage, high addiction scores, more conflicts, more sleep deprivation, and a clear majority reporting academic impact. LinkedIn traces a much smaller figure close to the centre. We can't say from this dataset whether the platforms cause those differences or whether they simply attract different kinds of users, but the contrasts hold across six independent metrics, which is harder to explain away as noise. Short-form video platforms tend to have a more detrimental effect on young adults than messaging platforms. WhatsApp is an exception, though its users likely engage with other platforms as well, which may explain this discrepancy.
250+
</p>
251+
</section>
252+
253+
<!-- SECTION 11: AGE TRAJECTORY -->
254+
<section id="section-academic-trajectory">
255+
<p class="section-kicker">11. Age Trajectory</p>
256+
<h2>How Do Health Patterns Shift Across Ages?</h2>
257+
<p class="section-desc">Six indicators tracked age by age. Dot size shows how many students sit behind each point — small dots mean a thin sample.</p>
258+
<div id="academic-trajectory-chart"></div>
259+
<p class="section-takeaway">
260+
The dots are largest between ages 19-22 because that's where most of the sample sits, so we trust those points the most; the thinner ages at either end should be read with more caution. Still, the pattern is consistent enough across both the well-sampled middle and the sparser edges that it's hard to attribute to noise. One encouraging finding is that older students appear better equipped to manage social media. Markers of problematic use : including addictive tendencies, daily usage, social conflicts, and academic impact, tend to decline with age, while mental health scores and sleep duration show improvement.
261+
</p>
262+
</section>
263+
264+
<!-- SECTION 12: HEALTH HEATMAP -->
265+
<section id="section-health-heatmap">
266+
<p class="section-kicker">12. Health Matrix</p>
267+
<h2>How Do Sleep and Usage Combine to Predict Wellbeing?</h2>
268+
<p class="section-desc">Sleep and usage are not independent risks; they reinforce one another. The matrix crosses three sleep categories with three usage categories. Cell colour reflects the average addiction score, the large number is the mental health score, and the percentage below is the share of students whose academic performance is affected. Reading along the diagonal tells most of the story.</p>
269+
<div id="health-heatmap-chart"></div>
270+
<p class="section-takeaway">
271+
The matrix sorts the cohort cleanly. At one corner, students who sleep long and use little hold the highest mental-health scores and the lowest addiction in the sample, with academic impact reported in only a fraction of cases. At the opposite corner, the 86 students who pair heavy use with short sleep average an addiction score of 8.5, and every single one of them reports academic impact. The two cells that would push back against the story : light users who don't sleep and heavy users who do, are empty, which itself is a finding: those combinations barely exist in this population. Reading the diagonal, sleep and usage don't merely correlate with worse outcomes one at a time; they compound, and the compounding looks close to linear.
272+
</p>
273+
</section>
274+
166275
</body>
167276
</html>

0 commit comments

Comments
 (0)