-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
122 lines (111 loc) · 7.8 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../css/home.css" />
<!-- import Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&display=swap" rel="stylesheet">
<!-- import js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="../js/d3.v7.js"></script>
<script src="../js/d3-format.v2.min.js"></script>
<script src="../js/home_js/donut_chart.js"></script>
<script src="../js/home_js/pyramid_bar_chart.js"></script>
</head>
<body>
<div class="intro">
<div class="headline">
About Mental Health Tracker
</div>
<span>
👋 Welcome to the <text style="font-family: Clash Display, Inter, sans-serif; font-weight: 600; font-size: 1.2em;">Mental Cares</text> Dashboard!
</span>
<span>
This dashboard is a tool that shows the prevalence and patterns of mental health illness as well as the related health care service based on county-level data among the United States. It also compares the public interests in mental health with the data from Google Search Trends.
Our team developed this resource to track services that are critically important to public health and a well-functioning health care system. Researchers, policymakers, and journalists can use this data to:
</span>
<span>
<li>
Monitor the prevalence and compare the patterns of mental health illness in U.S. population by age, race, and regions
</li>
<li>
Compare the geographical distribution of mental health service use
</li>
<li>
Pinpoint the effects of national and state level public health policies and initiatives on health care use
</li>
<li>
Observe the impact of natural phenomena, such as the COVID-19 pandemic, on the public interest in mental health related affairs
</li>
</span>
<span>
Primarily, the dashboard allows users to track patterns of mental health illness. This standardized measure enables comparisons of the volume of cases reported and health services used across different populations. This dashboard presents data at a county level. Users can filter and stratify the data by illness category and detailed age group, race, state, and county.
</span>
<!-- <span>
👩💻 <b>Contributors</b>
<br>
<a href="mailto:ywang115@usc.edu" style="color: #ffffff;">Ye Wang</a>,
<a href="mailto:jingqihu@usc.edu" style="color: #ffffff;">Jingqi Hu</a>,
<a href="mailto:leiyunin@usc.edu" style="color: #ffffff;">Yuning Lei</a>,
<a href="mailto:liyuning@usc.edu" style="color: #ffffff;">Chenyu Li</a>
</span> -->
<svg width="400px" height="400px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" margin-top="10px"><g stroke-width="0" ></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path d="M18.5 9.00002H16.5M16.5 9.00002L14.5 9.00002M16.5 9.00002L16.5 7M16.5 9.00002L16.5 11" stroke="rgb(134, 168, 255)" stroke-width="1.5" stroke-linecap="round"></path> <path d="M8.96173 19.3786L9.43432 18.7963L8.96173 19.3786ZM12 5.57412L11.4522 6.08635C11.594 6.23803 11.7923 6.32412 12 6.32412C12.2077 6.32412 12.406 6.23803 12.5478 6.08635L12 5.57412ZM15.0383 19.3787L15.5109 19.961L15.0383 19.3787ZM12 21L12 20.25L12 21ZM2.65159 13.6821C2.86595 14.0366 3.32705 14.1501 3.68148 13.9358C4.03591 13.7214 4.14946 13.2603 3.9351 12.9059L2.65159 13.6821ZM6.53733 16.1707C6.24836 15.8739 5.77352 15.8676 5.47676 16.1566C5.18 16.4455 5.17369 16.9204 5.46267 17.2171L6.53733 16.1707ZM2.75 9.3175C2.75 6.41289 4.01766 4.61731 5.58602 4.00319C7.15092 3.39043 9.34039 3.82778 11.4522 6.08635L12.5478 5.06189C10.1598 2.50784 7.34924 1.70187 5.0391 2.60645C2.73242 3.50967 1.25 5.99209 1.25 9.3175H2.75ZM15.5109 19.961C17.0033 18.7499 18.7914 17.1268 20.2127 15.314C21.6196 13.5196 22.75 11.4354 22.75 9.31747H21.25C21.25 10.9289 20.3707 12.6814 19.0323 14.3884C17.7084 16.077 16.0156 17.6197 14.5657 18.7963L15.5109 19.961ZM22.75 9.31747C22.75 5.99208 21.2676 3.50966 18.9609 2.60645C16.6508 1.70187 13.8402 2.50784 11.4522 5.06189L12.5478 6.08635C14.6596 3.82778 16.8491 3.39042 18.414 4.00319C19.9823 4.6173 21.25 6.41287 21.25 9.31747H22.75ZM8.48914 19.961C9.76058 20.9928 10.6423 21.75 12 21.75L12 20.25C11.2771 20.25 10.8269 19.9263 9.43432 18.7963L8.48914 19.961ZM14.5657 18.7963C13.1731 19.9263 12.7229 20.25 12 20.25L12 21.75C13.3577 21.75 14.2394 20.9928 15.5109 19.961L14.5657 18.7963ZM3.9351 12.9059C3.18811 11.6708 2.75 10.455 2.75 9.3175H1.25C1.25 10.8297 1.82646 12.3179 2.65159 13.6821L3.9351 12.9059ZM9.43432 18.7963C8.51731 18.0521 7.49893 17.1582 6.53733 16.1707L5.46267 17.2171C6.47548 18.2572 7.53996 19.1908 8.48914 19.961L9.43432 18.7963Z" fill="rgb(134, 168, 255)"></path> </g></svg>
</div>
<div class="about_box">
<div class="headline" style="color: rgb(19, 39, 89); text-align: center;">
<!-- 🧭 -->
Data Source
</div>
<span>
The data underlying this dashboard is compiled from administrative health care claims datasets:
</span>
<span>
<li>
<a href="https://www.samhsa.gov/data/data-we-collect/nsduh-national-survey-drug-use-and-health" target="_blank">National Survey on Drug Use and Health (NSDUH)</a>
</li>
<li>
<a href="https://mhanational.org/issues/2023/mental-health-america-all-data" target="_blank">Mental Health America</a>
</li>
<li>
<a href="https://data.hrsa.gov/tools/shortage-area/hpsa-find" target="_blank">Health Resources & Services Administration</a>
</li>
<li>
<a href="https://trends.google.com/trends/" target="_blank">Google Trends</a>
</li>
</span>
<span>
Note that the data is not available for all states. The dashboard will be updated periodically as new data becomes available.
</span>
</div>
<div class="about_box">
<div class="headline" style="color: rgb(19, 39, 89); text-align: center;">
Contact Us
</div>
<span>
This project is ongoing. Data will be updated periodically. For inquiries or collaborations, please contact the authors 👩💻:
</span>
<span>
<li>
<a href="mailto:ywang115@usc.edu">Ye Wang: ywang115@usc.edu</a>
</li>
<li>
<a href="mailto:jingqihu@usc.edu">Jingqi Hu: jingqihu@usc.edu</a>
</li>
<li>
<a href="mailto:leiyunin@usc.edu">Yuning Lei: leiyunin@usc.edu</a>
</li>
<li>
<a href="mailto:cli62440@usc.edu">Chenyu Li: cli62440@usc.edu</a>
</li>
</span>
</div>
</body>
</html>