Skip to content

Commit 0197df8

Browse files
feat(dashboard): modern palette for the citations chart
Replace the rainbow HSL fallback with a curated Tableau-derived qualitative palette (10 saturated hues + 10 companion tones). Overflow beyond 20 series walks the HSL wheel by the golden angle so colors stay distinct and balanced instead of clustering.
1 parent 73a1882 commit 0197df8

1 file changed

Lines changed: 18 additions & 8 deletions

File tree

dashboard/osa/index.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1173,13 +1173,23 @@ <h3 style="color:#1e3a5f;margin:1.5rem 0 1rem;font-size:1rem;">Admin: Feedback</
11731173
});
11741174
}
11751175

1176-
// Distinct color per series: use the fixed palette, then spread evenly
1177-
// around the HSL wheel when there are more series than palette entries
1178-
// (the citation chart can stack 14+ canonical papers).
1179-
function seriesColor(idx, total) {
1180-
if (total <= COLORS.length) return COLORS[idx];
1181-
const hue = Math.round((idx / total) * 360);
1182-
return `hsl(${hue}, 62%, 48%)`;
1176+
// Modern qualitative palette (Tableau 10 + companion tones) for charts that
1177+
// stack many series, e.g. the citations chart's 14+ canonical papers. The
1178+
// ten saturated hues come first so smaller charts stay high-contrast.
1179+
const CITATION_PALETTE = [
1180+
'#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
1181+
'#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
1182+
'#a0cbe8', '#ffbe7d', '#8cd17d', '#f1ce63', '#86bcb6',
1183+
'#ff9d9a', '#d37295', '#fabfd2', '#d4a6c8', '#d7b5a6',
1184+
];
1185+
1186+
// Distinct color per series. Use the curated palette first; beyond it,
1187+
// walk the HSL wheel by the golden angle so overflow colors stay distinct
1188+
// and balanced rather than clustering.
1189+
function seriesColor(idx) {
1190+
if (idx < CITATION_PALETTE.length) return CITATION_PALETTE[idx];
1191+
const hue = Math.round((idx * 137.508) % 360);
1192+
return `hsl(${hue}, 55%, 55%)`;
11831193
}
11841194

11851195
function renderCitationsChart(citations) {
@@ -1204,7 +1214,7 @@ <h3 style="color:#1e3a5f;margin:1.5rem 0 1rem;font-size:1rem;">Admin: Feedback</
12041214
const datasets = dois.map((doi, idx) => ({
12051215
label: labels[doi] || doi,
12061216
data: years.map(y => byPaper[doi][y] || 0),
1207-
backgroundColor: seriesColor(idx, dois.length),
1217+
backgroundColor: seriesColor(idx),
12081218
borderWidth: 0,
12091219
}));
12101220

0 commit comments

Comments
 (0)