cspicks/faq.html at main · dynaroars/cspicks · 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
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CS Picks - FAQ & Methods</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./src/style.css">
</head>

<body>
    <!-- Theme toggle button -->
    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
        <span class="sun-icon">☀️</span>
        <span class="moon-icon">🌙</span>
    </button>
    <script>
        const savedTheme = localStorage.getItem('theme');
        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const initialTheme = savedTheme || (systemDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', initialTheme);
    </script>

    <div id="app">
        <header>
            <h1>CS Picks</h1>
            <div class="top-nav" style="display: flex; gap: 1rem; margin-bottom: 1rem; justify-content: center;">
                <a href="index.html"
                    style="text-decoration: none; color: var(--text-secondary); font-weight: 600;">Search</a>
                <a href="analysis.html"
                    style="text-decoration: none; color: var(--text-secondary); font-weight: 600;">Analysis</a>
                <a href="compare.html"
                    style="text-decoration: none; color: var(--text-secondary); font-weight: 600;">Compare</a>
            </div>
            <p>Frequently Asked Questions & Methodology</p>
        </header>

        <main style="max-width: 800px; margin: 0 auto; padding: 2rem 1rem;">

            <section class="faq-section" style="margin-bottom: 3rem;">
                <h2 style="font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 1rem;">Data &
                    Rankings</h2>

                <div class="faq-item" style="margin-bottom: 1.5rem;">
                    <h3 style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">How are rankings
                        calculated?</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6;">
                        CSPicks uses the <strong>Geometric Mean</strong> of adjusted publication counts across all
                        research areas.
                        This approach rewards institutions for having breadth across multiple areas of Computer Science
                        rather than just dominating in one.
                        The formula is: <code
                            style="background: var(--card-bg); padding: 0.1rem 0.3rem; border-radius: 4px; color: var(--text-primary);">Score = (Π(adjusted_count + 1))^(1/num_areas)</code>.
                    </p>
                </div>

                <div class="faq-item" style="margin-bottom: 1.5rem;">
                    <h3 style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">What is "Adjusted
                        Count"?</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6;">
                        Each paper counts as <strong>1.0</strong> total. This value is divided equally among all
                        co-authors.
                        For example, if a paper has 4 authors, each author receives <strong>0.25</strong> credit.
                        This prevents inflation of counts simply by having large author lists.
                    </p>
                </div>

                <div class="faq-item" style="margin-bottom: 1.5rem;">
                    <h3 style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">Where does the data
                        come from?</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6;">
                        Publication data is directly sourced from <a href="https://csrankings.org" target="_blank"
                            style="color: var(--accent-color);">CSRankings</a>.
                        Historical affiliation data (tracking where a professor was in the past) is sourced from <a
                            href="https://openalex.org" target="_blank"
                            style="color: var(--accent-color);">OpenAlex</a>. Read Data & Acknowledgment for more info.
                    </p>
                </div>
            </section>

            <section class="faq-section" style="margin-bottom: 3rem;">
                <h2 style="font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 1rem;">Features
                    & Filters</h2>

                <div class="faq-item" style="margin-bottom: 1.5rem;">
                    <h3 style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">What is Historical
                        Mode?</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6;">
                        By default, rankings credit all of a professor's papers to their <em>current</em> institution.
                        <strong>Historical Mode</strong> changes this attribution: it credits papers to the institution
                        where the professor was affiliated
                        <em>at the time of publication</em>. This provides a more accurate view of a department's output
                        for a specific past time window.
                    </p>
                </div>

                <div class="faq-item" style="margin-bottom: 1.5rem;">
                    <h3 style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">What are the
                        Conference Set options?</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6;">
                        This filter determines which conferences are included in the rankings. Four options are
                        available:
                    </p>
                    <ul
                        style="color: var(--text-secondary); margin-left: 1.5rem; margin-top: 0.5rem; list-style-type: disc;">
                        <li style="margin-bottom: 0.5rem;"><strong>CSRankings (All):</strong> Includes ALL conferences
                            from csrankings.org,
                            including both default venues and next-tier conferences (ASE, ISSTA, ICDE, PODS, HPCA, NDSS,
                            EuroSys, Eurographics, FAST, USENIX ATC, ICFP, OOPSLA, KDD).</li>
                        <li style="margin-bottom: 0.5rem;"><strong>CSRankings (Default):</strong> Includes only the
                            default set of
                            top-tier conferences from csrankings.org, excluding next-tier venues. This matches the
                            original CSRankings behavior and is the default option.</li>
                        <li style="margin-bottom: 0.5rem;"><strong>CORE A*:</strong> Only includes conferences rated as
                            <strong>A*</strong>
                            (top 4%) by the CORE Ranking 2023. This is the most restrictive option.
                        </li>
                        <li><strong>CORE A:</strong> Includes conferences rated as <strong>A</strong>
                            (top 13%) by the ICORE Ranking 2026. This includes 103 conferences across all CS areas.
                        </li>
                    </ul>
                </div>

            </section>

        </main>

        <footer style="text-align: center; padding: 0.75rem; color: var(--text-secondary); font-size: 0.9rem;">
            <a href="faq.html" style="color: inherit; text-decoration: underline; margin-right: 1rem;">FAQ & Methods</a>
            <a href="#" id="open-ack-modal" style="color: inherit; text-decoration: underline;">Data &
                Acknowledgment</a>
        </footer>
    </div>

    <div id="ack-modal" class="modal hidden">
        <div class="modal-content" style="max-width: 500px;">
            <div class="modal-header">
                <h2>Data & Acknowledgment</h2>
                <button class="close-modal"
                    onclick="document.getElementById('ack-modal').classList.add('hidden')">&times;</button>
            </div>
            <div class="modal-body" style="text-align: left;">
                <p>CSPicks is inspired by <a href="https://csrankings.org"
                        target="_blank"><strong>CSRankings</strong></a> and
                    uses its taxonomy and data to organize results.</p>
                <p>Historical affiliation data is sourced from <a href="https://openalex.org"
                        target="_blank"><strong>OpenAlex</strong></a>,
                    an open catalog of the world's scholarly works.</p>
                <p style="color: var(--text-secondary); font-size: 0.9em;"><em>⚠️ OpenAlex uses automated extraction
                        which may produce
                        inaccuracies in their affiliation data.
                        Some historical affiliations may be missing, incorrect, or include short-term visiting
                        positions.
                        These limitations are inherent to the OpenAlex dataset and not errors in CSPicks.</em></p>
                <p style="color: #059669; font-size: 0.9em;"><strong>Wrong affiliation?</strong> You can submit
                    corrections
                    by opening an issue on
                    <a href="https://github.com/dynaroars/cspicks/issues" target="_blank">GitHub</a> with the
                    professor's name,
                    correct school, and years.
                    We maintain a manual override file to fix OpenAlex errors.
                </p>
                <p>All information is fetched on demand; no data is stored.</p>
                <p>Report bugs and issues on <a href="https://github.com/dynaroars/cspicks"
                        target="_blank"><strong>GitHub</strong></a>.</p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('open-ack-modal').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('ack-modal').classList.remove('hidden');
        });
        document.getElementById('ack-modal').addEventListener('click', (e) => {
            if (e.target.id === 'ack-modal') {
                document.getElementById('ack-modal').classList.add('hidden');
            }
        });
    </script>


    <script>
        const toggle = document.getElementById('theme-toggle');
        if (toggle) {
            toggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
                const newTheme = currentTheme === 'light' ? 'dark' : 'light';
                document.documentElement.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
            });
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
                if (!localStorage.getItem('theme')) {
                    document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
                }
            });
        }
    </script>
</body>

</html>