Skip to content

Commit d62f53b

Browse files
amirrramirrr
committed
deploy: f3dd163 
0 parents  commit d62f53b

File tree

8 files changed

+23674
-0
lines changed

8 files changed

+23674
-0
lines changed

‎.nojekyll‎

Whitespace-only changes.

‎index.html‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Data Analysis Dashboard</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
:root {
16+
--primary: #2C3E50;
17+
--secondary: #3498DB;
18+
--accent: #E74C3C;
19+
--success: #27AE60;
20+
--warning: #F39C12;
21+
--light: #F8F9FA;
22+
--medium: #95A5A6;
23+
--dark: #34495E;
24+
}
25+
26+
body {
27+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
28+
background: #FAFBFC;
29+
min-height: 100vh;
30+
padding: 0;
31+
margin: 0;
32+
}
33+
34+
.header {
35+
background: white;
36+
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
37+
}
38+
39+
.header-content {
40+
max-width: 1600px;
41+
margin: 0 auto;
42+
padding: 2rem;
43+
}
44+
45+
h1 {
46+
font-size: 1.75rem;
47+
font-weight: 600;
48+
color: var(--primary);
49+
margin-bottom: 1.5rem;
50+
}
51+
52+
.filter-section {
53+
display: flex;
54+
align-items: flex-end;
55+
gap: 1rem;
56+
margin-bottom: 1.5rem;
57+
flex-wrap: wrap;
58+
}
59+
60+
.filter-group {
61+
display: flex;
62+
flex-direction: column;
63+
gap: 0.375rem;
64+
}
65+
66+
.filter-label {
67+
font-size: 0.875rem;
68+
color: var(--dark);
69+
font-weight: 500;
70+
}
71+
72+
input[type="date"] {
73+
padding: 0.5rem 0.75rem;
74+
border: 1px solid #DDD;
75+
border-radius: 4px;
76+
font-size: 0.875rem;
77+
background: white;
78+
height: 36px;
79+
min-width: 140px;
80+
}
81+
82+
.button-group {
83+
display: flex;
84+
gap: 0.5rem;
85+
}
86+
87+
.filter-button, .clear-button {
88+
padding: 0.5rem 1.25rem;
89+
border: none;
90+
border-radius: 4px;
91+
cursor: pointer;
92+
font-size: 0.875rem;
93+
font-weight: 500;
94+
transition: all 0.2s;
95+
height: 36px;
96+
display: flex;
97+
align-items: center;
98+
}
99+
100+
.filter-button {
101+
background: var(--primary);
102+
color: white;
103+
}
104+
105+
.filter-button:hover {
106+
background: var(--dark);
107+
transform: translateY(-1px);
108+
}
109+
110+
.clear-button {
111+
background: white;
112+
color: var(--medium);
113+
border: 1px solid #DDD;
114+
}
115+
116+
.clear-button:hover {
117+
background: var(--light);
118+
border-color: var(--medium);
119+
}
120+
121+
.timestamp {
122+
margin-left: auto;
123+
font-size: 0.8125rem;
124+
color: var(--medium);
125+
display: flex;
126+
align-items: center;
127+
}
128+
129+
.stats-bar {
130+
display: grid;
131+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
132+
gap: 1.5rem;
133+
padding: 1.5rem;
134+
background: var(--light);
135+
border-radius: 8px;
136+
}
137+
138+
.stat-item {
139+
text-align: center;
140+
}
141+
142+
.stat-value {
143+
font-size: 1.5rem;
144+
font-weight: 600;
145+
color: var(--primary);
146+
margin-bottom: 0.25rem;
147+
}
148+
149+
.stat-label {
150+
font-size: 0.75rem;
151+
color: var(--medium);
152+
text-transform: uppercase;
153+
letter-spacing: 0.5px;
154+
}
155+
156+
.container {
157+
max-width: 1600px;
158+
margin: 0 auto;
159+
padding: 2rem;
160+
}
161+
162+
.grid {
163+
display: grid;
164+
gap: 2rem;
165+
margin-bottom: 2rem;
166+
}
167+
168+
.grid-2 {
169+
grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
170+
}
171+
172+
.card {
173+
background: white;
174+
border-radius: 8px;
175+
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
176+
overflow: hidden;
177+
}
178+
179+
.card-header {
180+
background: white;
181+
color: var(--primary);
182+
padding: 1.25rem 1.5rem;
183+
font-size: 1rem;
184+
font-weight: 600;
185+
border-bottom: 1px solid var(--light);
186+
}
187+
188+
.plot-frame {
189+
width: 100%;
190+
height: 500px;
191+
border: none;
192+
background: white;
193+
}
194+
195+
.full-width {
196+
grid-column: 1 / -1;
197+
}
198+
199+
@media (max-width: 768px) {
200+
.grid-2 {
201+
grid-template-columns: 1fr;
202+
}
203+
204+
.stats-bar {
205+
grid-template-columns: repeat(2, 1fr);
206+
gap: 1rem;
207+
}
208+
209+
.filter-section {
210+
flex-direction: column;
211+
align-items: stretch;
212+
}
213+
214+
.timestamp {
215+
margin-left: 0;
216+
margin-top: 1rem;
217+
}
218+
}
219+
</style>
220+
</head>
221+
<body>
222+
<header class="header">
223+
<div class="header-content">
224+
<h1>Data Analysis Dashboard</h1>
225+
226+
<div class="filter-section">
227+
<div class="filter-group">
228+
<label class="filter-label">Start Date</label>
229+
<input type="date" id="start-date" />
230+
</div>
231+
<div class="filter-group">
232+
<label class="filter-label">End Date</label>
233+
<input type="date" id="end-date" />
234+
</div>
235+
<div class="button-group">
236+
<button class="filter-button" onclick="applyFilters()">Apply Filter</button>
237+
<button class="clear-button" onclick="clearFilters()">Clear</button>
238+
</div>
239+
<div class="timestamp">
240+
Last updated: 2025-12-26 00:29
241+
</div>
242+
</div>
243+
244+
<div class="stats-bar">
245+
<div class="stat-item">
246+
<div class="stat-value">2,972</div>
247+
<div class="stat-label">Statements</div>
248+
</div>
249+
<div class="stat-item">
250+
<div class="stat-value">72,424</div>
251+
<div class="stat-label">Sessions</div>
252+
</div>
253+
<div class="stat-item">
254+
<div class="stat-value">11.4</div>
255+
<div class="stat-label">Avg Responses</div>
256+
</div>
257+
<div class="stat-item">
258+
<div class="stat-value">0.663</div>
259+
<div class="stat-label">Avg Consensus</div>
260+
</div>
261+
<div class="stat-item">
262+
<div class="stat-value">0.758</div>
263+
<div class="stat-label">Avg Awareness</div>
264+
</div>
265+
<div class="stat-item">
266+
<div class="stat-value">0.783</div>
267+
<div class="stat-label">Avg Commonsense</div>
268+
</div>
269+
</div>
270+
</div>
271+
</header>
272+
273+
<div class="container">
274+
<!-- Summary Statistics -->
275+
<div class="card full-width">
276+
<div class="card-header">Summary Statistics</div>
277+
<iframe src="plots/summary_stats.html" class="plot-frame" style="height: 320px;" loading="lazy"></iframe>
278+
</div>
279+
280+
<!-- Main Analysis Grid -->
281+
<div class="grid grid-2">
282+
<div class="card">
283+
<div class="card-header">Statement-Level Analysis</div>
284+
<iframe src="plots/consensus_awareness.html" class="plot-frame" loading="lazy"></iframe>
285+
</div>
286+
287+
<div class="card">
288+
<div class="card-header">Session-Level Analysis</div>
289+
<iframe src="plots/individual_consensus_awareness.html" class="plot-frame" loading="lazy"></iframe>
290+
</div>
291+
</div>
292+
293+
<!-- Distributions Section -->
294+
<div class="card full-width">
295+
<div class="card-header">Metrics Distributions</div>
296+
<iframe src="plots/statement_metrics_dist.html" class="plot-frame" style="height: 400px;" loading="lazy"></iframe>
297+
</div>
298+
299+
<div class="grid grid-2">
300+
<div class="card">
301+
<div class="card-header">Commonsensicality Distribution</div>
302+
<iframe src="plots/commonsensicality_dist.html" class="plot-frame" loading="lazy"></iframe>
303+
</div>
304+
305+
<div class="card">
306+
<div class="card-header">Response Count Distribution</div>
307+
<iframe src="plots/response_count_dist.html" class="plot-frame" loading="lazy"></iframe>
308+
</div>
309+
</div>
310+
</div>
311+
312+
<script>
313+
function applyFilters() {
314+
const startDate = document.getElementById('start-date').value;
315+
const endDate = document.getElementById('end-date').value;
316+
317+
if (startDate || endDate) {
318+
localStorage.setItem('filterStartDate', startDate);
319+
localStorage.setItem('filterEndDate', endDate);
320+
alert('Date filter applied. In production, this would reload the data with the specified date range.');
321+
}
322+
}
323+
324+
function clearFilters() {
325+
document.getElementById('start-date').value = '';
326+
document.getElementById('end-date').value = '';
327+
localStorage.removeItem('filterStartDate');
328+
localStorage.removeItem('filterEndDate');
329+
}
330+
331+
// Load saved filters on page load
332+
window.onload = function() {
333+
const savedStartDate = localStorage.getItem('filterStartDate');
334+
const savedEndDate = localStorage.getItem('filterEndDate');
335+
336+
if (savedStartDate) {
337+
document.getElementById('start-date').value = savedStartDate;
338+
}
339+
if (savedEndDate) {
340+
document.getElementById('end-date').value = savedEndDate;
341+
}
342+
};
343+
</script>
344+
</body>
345+
</html>
346+

‎plots/commonsensicality_dist.html‎

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

‎plots/consensus_awareness.html‎

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

‎plots/individual_consensus_awareness.html‎

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

‎plots/response_count_dist.html‎

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

‎plots/statement_metrics_dist.html‎

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

‎plots/summary_stats.html‎

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

0 commit comments

Comments
 (0)