-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdatasets.html
More file actions
147 lines (137 loc) · 5.54 KB
/
Copy pathdatasets.html
File metadata and controls
147 lines (137 loc) · 5.54 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dataset Explorer — AtlasNLP</title>
<meta name="description" content="Browse and filter 18,000+ NLP datasets by country, language, task, and year.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/dist/tabler-icons.min.css">
<link rel="stylesheet" href="style.css">
<style>
.filter-group--wide { flex: 2; }
.filter-group--narrow { flex: 0 0 110px; min-width: 90px; }
</style>
</head>
<body class="pg">
<!-- NAV -->
<nav class="nav">
<a href="index.html" class="logo">
<div class="logo-mark"><i class="ti ti-world" aria-hidden="true"></i></div>
AtlasNLP
</a>
<button class="hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
<div class="nav-links">
<a href="index.html" class="nl">Home</a>
<a href="datasets.html" class="nl">Datasets</a>
<a href="analysis.html" class="nl">Analysis</a>
<a href="visualizations.html" class="nl">Visualizations</a>
<button class="nav-cta" id="nav-dl">
<i class="ti ti-download" aria-hidden="true"></i> Download
</button>
</div>
</nav>
<!-- HERO -->
<div class="hero-page">
<span class="eyebrow">Dataset Explorer</span>
<h1>Browse 18,035 NLP Datasets</h1>
<p>Filter by country, language, task, and year. Switch between AtlasNLP Core (18,035 automated) and Gold (1,661 human-validated).</p>
</div>
<!-- EXPLORER -->
<div class="section" id="datasets-section">
<!-- Source toggle -->
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;">
<span style="font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;">Source</span>
<div class="toggle-pills">
<button class="toggle-pill active" data-source="all">All (Core + Gold)</button>
<button class="toggle-pill" data-source="core">Core only</button>
<button class="toggle-pill" data-source="gold">Gold only</button>
</div>
</div>
<!-- Filter bar -->
<div class="filter-bar">
<div class="filter-row">
<div class="filter-group filter-group--wide">
<label for="filter-search">Search</label>
<input id="filter-search" type="search" placeholder="Dataset name or description…">
</div>
<div class="filter-group">
<label for="filter-task">Task</label>
<select id="filter-task"><option value="">All tasks</option></select>
</div>
<div class="filter-group">
<label for="filter-country">Country</label>
<select id="filter-country"><option value="">All countries</option></select>
</div>
<div class="filter-group">
<label for="filter-lang">Language</label>
<select id="filter-lang"><option value="">All languages</option></select>
</div>
</div>
<div class="filter-row" style="margin-top:.6rem;">
<div class="filter-group filter-group--narrow">
<label for="filter-year-from">Year from</label>
<input id="filter-year-from" type="number" placeholder="2000">
</div>
<div class="filter-group filter-group--narrow">
<label for="filter-year-to">Year to</label>
<input id="filter-year-to" type="number" placeholder="2024">
</div>
<div class="filter-group">
<label for="filter-modality">Modality (Core)</label>
<select id="filter-modality"><option value="">All modalities</option></select>
</div>
<div class="filter-group">
<label for="filter-resource">Resource level (Gold)</label>
<select id="filter-resource"><option value="">All levels</option></select>
</div>
<div class="filter-group" style="flex:0;justify-content:flex-end;">
<label style="visibility:hidden;">x</label>
<button class="btn-ghost" id="btn-clear">Clear filters</button>
</div>
</div>
</div>
<!-- Result bar -->
<div class="result-bar">
<span class="result-count" id="result-count">Loading…</span>
<button class="btn-ghost" id="btn-download"><i class="ti ti-download" style="font-size:12px;" aria-hidden="true"></i> Download CSV</button>
</div>
<!-- Loading -->
<div id="datasets-main">
<div class="spinner-wrap"><div class="spinner"></div><span>Loading datasets…</span></div>
</div>
<div id="table-wrap"></div>
<div class="pagination" id="pagination"></div>
</div>
<!-- FOOTER -->
<footer class="footer">
<span class="ft">AtlasNLP · A country-aware atlas of NLP dataset representation</span>
<div class="ft-links">
<a href="index.html" class="ft-link">Home</a>
<a href="datasets.html" class="ft-link">Datasets</a>
<a href="analysis.html" class="ft-link">Analysis</a>
<a href="visualizations.html" class="ft-link">Visualizations</a>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<script src="main.js"></script>
<script src="datasets.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('nav-dl').addEventListener('click', () => {
const a = document.createElement('a');
a.href = 'automated_full_set_with_audited_languages.csv';
a.download = 'atlasnlp-core.csv'; a.click();
});
/* Pre-select source from URL param */
const src = new URLSearchParams(location.search).get('source');
if (src) {
document.querySelectorAll('.toggle-pill').forEach(b => {
b.classList.toggle('active', b.dataset.source === src);
});
}
});
</script>
</body>
</html>