-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGameQueryGraph.html
191 lines (159 loc) · 8.89 KB
/
GameQueryGraph.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game's Query Graphical Description</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="https://github.com/gilseg10/Information-recovery-class">EasyGo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="main.html">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Nitsan.html">Nitsan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Elad.html">Elad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Chen.html">Chen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Gilad.html">Gilad</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="ourProjectDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Our Project
</a>
<ul class="dropdown-menu" aria-labelledby="ourProjectDropdown">
<li><a class="dropdown-item active" href="GameQueryGraph.html">Game's Query Graphs</a></li>
<li><a class="dropdown-item" href="TF-IDF.html">TF-IDF Screenshots</a></li>
<li><a class="dropdown-item" href="HubsAndAuth.html">Hubs and Auth Exercise</a></li>
<li><a class="dropdown-item" href="SteamCrawler.html">Steam Crawler</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<h2 class="text-center">Game's Query Graphical Description</h2>
<p>Below are the visualizations and interactive elements that describe the division of games returned from our query into categories: Casual, Intense, Competitive.</p>
<!-- Insert your graph images here -->
<div class="row">
<img src="images/GameQueryGraph.png" class="img-fluid" alt="Action Games Graph">
</div>
<!-- Interactive Game Selection -->
<div class="mt-5">
<h3>Interactive Game Selection</h3>
<div id="interactive-selection">
<select id="category-dropdown" class="form-select mb-3">
<option selected>Select a Category</option>
</select>
<select id="game-dropdown" class="form-select mb-3">
<option selected>Select a Game</option>
</select>
<p id="selected-game-label"></p>
<p id="less-time-label"></p>
<p id="more-time-label"></p>
</div>
</div>
</div>
<script>
function parseCSV() {
Papa.parse('GameQueryCSV/query1-gamesPlaytime-new.csv', {
download: true,
header: true, // Assume the first row contains the correct headers
skipEmptyLines: true, // Ignore empty rows
complete: function(results) {
let rawData = results.data;
console.log('Raw Parsed Data:', rawData);
// Validate the data to ensure keys are as expected
const filteredData = rawData.filter(row =>
row['game name'] && row['Category'] && row['number of players'] && row['average playtime']
);
console.log('Filtered Data:', filteredData);
if (filteredData.length > 0) {
const mappedData = filteredData.map(row => ({
name: row['game name'].trim(),
category: row['Category'].trim(),
avgPlaytime: parseFloat(row['average playtime']),
players: parseInt(row['number of players'], 10)
}));
console.log('Mapped Data:', mappedData);
const categories = [...new Set(mappedData.map(game => game.category))];
console.log('Categories:', categories);
// Populate dropdowns with data
populateDropdowns(mappedData);
} else {
console.error("No valid data found after filtering.");
}
},
error: function(error) {
console.error('Error parsing CSV:', error);
}
});
}
function populateDropdowns(data) {
const categories = [...new Set(data.map(game => game.category))];
console.log('Categories:', categories); // Log the categories
const categoryDropdown = document.getElementById('category-dropdown');
categories.forEach(category => {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
categoryDropdown.appendChild(option);
});
categoryDropdown.addEventListener('change', () => {
const selectedCategory = categoryDropdown.value;
const filteredGames = data
.filter(game => game.category === selectedCategory)
.sort((a, b) => a.name.localeCompare(b.name)); // Sort games A-Z by name
const gameDropdown = document.getElementById('game-dropdown');
gameDropdown.innerHTML = '<option selected>Select a Game</option>'; // Clear previous options
filteredGames.forEach(game => {
const option = document.createElement('option');
option.value = game.name;
option.textContent = game.name;
gameDropdown.appendChild(option);
});
});
document.getElementById('game-dropdown').addEventListener('change', () => {
const selectedGameName = document.getElementById('game-dropdown').value;
const selectedGame = data.find(game => game.name === selectedGameName);
const selectedGameLabel = document.getElementById('selected-game-label');
selectedGameLabel.innerHTML = `<b>Selected Game:</b> ${selectedGame.name} - Average Playtime: ${selectedGame.avgPlaytime} hours - Number of Players: ${selectedGame.players}`;
const lessTimeGame = data
.filter(game => game.category === selectedGame.category && game.avgPlaytime < selectedGame.avgPlaytime)
.sort((a, b) => b.avgPlaytime - a.avgPlaytime)[0];
const moreTimeGame = data
.filter(game => game.category === selectedGame.category && game.avgPlaytime > selectedGame.avgPlaytime)
.sort((a, b) => a.avgPlaytime - b.avgPlaytime)[0];
const lessTimeLabel = document.getElementById('less-time-label');
const moreTimeLabel = document.getElementById('more-time-label');
lessTimeLabel.innerHTML = lessTimeGame ?
`<b>Less Time-Consuming Option:</b> ${lessTimeGame.name} - ${lessTimeGame.avgPlaytime} hours - Number of Players: ${lessTimeGame.players}` :
`<b>Less Time-Consuming Option:</b> None`;
moreTimeLabel.innerHTML = moreTimeGame ?
`<b>More Time-Consuming Option:</b> ${moreTimeGame.name} - ${moreTimeGame.avgPlaytime} hours - Number of Players: ${moreTimeGame.players}` :
`<b>More Time-Consuming Option:</b> None`;
});
}
// Run the function to parse CSV and initialize the interactive dropdowns
parseCSV();
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>