INFO498_data/index.html at main · Kwang37/INFO498_data · GitHub

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>GrowBuddy Research Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      font-family: "Arial", sans-serif;
      margin: 20px;
      background-color: #f9f9f9;
      color: #333;
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
    }

    .chart-container {
      display: flex;
      flex-direction: column;
      gap: 30px;
      max-width: 800px;
      margin: 0 auto;
    }

    .chart-box {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    canvas {
      max-width: 100%;
      height: 300px;
    }

    .caption {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <h1>GrowBuddy User Research Dashboard</h1>
  <div class="chart-container">
    <div class="chart-box">
      <canvas id="screenTimeChart"></canvas>
      <div class="caption">📱 Daily Screen Time by Age Group</div>
    </div>
    <div class="chart-box">
      <canvas id="activityChart"></canvas>
      <div class="caption">🏀 Extracurricular Participation by Gender</div>
    </div>
    <div class="chart-box">
      <canvas id="incomeChart"></canvas>
      <div class="caption">💰 Activity Access by Household Income</div>
    </div>
    <div class="chart-box">
      <canvas id="mindsetChart"></canvas>
      <div class="caption">🧠 Growth Mindset vs. Academic Performance</div>
    </div>
  </div>

  <script>
    // Chart 1: Screen Time by Age
    new Chart(document.getElementById('screenTimeChart'), {
      type: 'bar',
      data: {
        labels: ['Ages 10-11', 'Ages 12-13'],
        datasets: [{
          label: 'Daily Screen Time (minutes)',
          data: [164, 196],
          backgroundColor: '#42a5f5'
        }]
      }
    });

    // Chart 2: Activities by Gender
    new Chart(document.getElementById('activityChart'), {
      type: 'bar',
      data: {
        labels: ['Clubs', 'Creative Lessons', 'Sports'],
        datasets: [
          {
            label: 'Girls (%)',
            data: [29, 37, 65],
            backgroundColor: '#ec407a'
          },
          {
            label: 'Boys (%)',
            data: [24, 27, 75],
            backgroundColor: '#66bb6a'
          }
        ]
      }
    });

    // Chart 3: Access by Income
    new Chart(document.getElementById('incomeChart'), {
      type: 'bar',
      data: {
        labels: ['Sports', 'Music/Dance/Art Lessons'],
        datasets: [
          {
            label: 'High-Income (%)',
            data: [84, 62],
            backgroundColor: '#7e57c2'
          },
          {
            label: 'Low-Income (%)',
            data: [59, 41],
            backgroundColor: '#ffca28'
          }
        ]
      }
    });

    // Chart 4: Mindset and Performance
    new Chart(document.getElementById('mindsetChart'), {
      type: 'line',
      data: {
        labels: ['Fixed Mindset', 'Growth Mindset'],
        datasets: [{
          label: 'Average Academic Score',
          data: [65, 85],
          borderColor: '#26c6da',
          backgroundColor: 'rgba(38, 198, 218, 0.2)',
          fill: true
        }]
      }
    });
  </script>
</body>
</html>