Skip to content

Commit 93da7d7

Browse files
Matt-V50Matt-V50
committed
add chart lib as charty
1 parent 4f98639 commit 93da7d7

2 files changed

Lines changed: 133 additions & 113 deletions

File tree

‎_pages/experiment_chart.html‎

Lines changed: 11 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -24,106 +24,9 @@
2424

2525
<div id="chart6" class="chart"></div>
2626

27-
<script>
28-
var sheetUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSgRb1CWKFvn_Yx-AJucuj9uEk9Xblfepoyr2qRcjG8m-mL7mCeNm78Pv0QuMTlVuf6rGFBaPF0bfdD/pub?gid=0&single=true&output=csv';
29-
30-
function getCurrentTheme() {
31-
const html = document.documentElement;
32-
const body = document.body;
33-
34-
if (html.classList.contains('dark') ||
35-
body.classList.contains('dark') ||
36-
html.getAttribute('data-theme') === 'dark' ||
37-
body.getAttribute('data-theme') === 'dark') {
38-
return 'dark';
39-
}
40-
return 'light';
41-
}
42-
43-
function getThemedLayoutBase() {
44-
const isDark = getCurrentTheme() === 'dark';
45-
46-
return {
47-
font: {
48-
family: 'Times New Roman, serif',
49-
size: 14,
50-
color: isDark ? '#e0e0e0' : '#000'
51-
},
52-
paper_bgcolor: isDark ? 'rgba(0,0,0,0)' : '#fff',
53-
plot_bgcolor: isDark ? '#2d2d2d' : '#fff',
54-
margin: {t: 60, b: 80, l: 70, r: 100},
55-
xaxis: {
56-
showline: true,
57-
linewidth: 1.5,
58-
linecolor: isDark ? '#666' : '#000',
59-
mirror: true,
60-
ticks: 'outside',
61-
tickwidth: 1,
62-
tickcolor: isDark ? '#666' : '#000',
63-
tickfont: {size: 11, color: isDark ? '#e0e0e0' : '#000'},
64-
showgrid: false,
65-
tickangle: -30
66-
},
67-
yaxis: {
68-
showline: true,
69-
linewidth: 1.5,
70-
linecolor: isDark ? '#666' : '#000',
71-
mirror: true,
72-
ticks: 'outside',
73-
tickwidth: 1,
74-
tickcolor: isDark ? '#666' : '#000',
75-
tickfont: {size: 11, color: isDark ? '#e0e0e0' : '#000'},
76-
showgrid: true,
77-
gridcolor: isDark ? '#444' : '#e0e0e0',
78-
gridwidth: 0.5,
79-
zeroline: false
80-
},
81-
legend: {
82-
orientation: 'v',
83-
yanchor: 'middle',
84-
y: 0.5,
85-
xanchor: 'left',
86-
x: 1.02,
87-
font: {size: 10, color: isDark ? '#e0e0e0' : '#000'},
88-
bordercolor: isDark ? '#666' : '#ccc',
89-
borderwidth: 1,
90-
bgcolor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.9)'
91-
},
92-
bargap: 0.2,
93-
bargroupgap: 0.1
94-
};
95-
}
96-
97-
function getThemedBarStyle() {
98-
const isDark = getCurrentTheme() === 'dark';
99-
return {
100-
line: {color: isDark ? '#666' : '#000', width: 0.5}
101-
};
102-
}
27+
<script src="{{ '/assets/js/chart_lib.js' | relative_url }}"></script>
10328

104-
105-
106-
function formatTime(secs) {
107-
if (!secs) return 'N/A';
108-
if (secs >= 3600) {
109-
return `${Math.floor(secs/3600)}h ${Math.floor((secs%3600)/60)}m ${Math.round(secs%60)}s`;
110-
}
111-
if (secs >= 60) {
112-
return `${Math.floor(secs/60)}m ${Math.round(secs%60)}s`;
113-
}
114-
return `${secs}s`;
115-
}
116-
117-
function parseHMS(val) {
118-
const parts = String(val).split(':').map(Number);
119-
if (parts.length === 3) {
120-
return parts[0] * 3600 + parts[1] * 60 + parts[2];
121-
}
122-
if (parts.length === 2) {
123-
return parts[0] * 60 + parts[1];
124-
}
125-
return parseFloat(val) || 0;
126-
}
29+
<script>
12730

12831
var globalData = null;
12932

@@ -140,8 +43,8 @@
14043
var uniqueDownsampling = globalData.uniqueDownsampling;
14144
var markerShapes = globalData.markerShapes;
14245

143-
var layout_base = getThemedLayoutBase();
144-
var barStyle = getThemedBarStyle();
46+
var layout_base = charty.getThemedLayoutBase();
47+
var barStyle = charty.getThemedBarStyle();
14548
var plotConfig = {displayModeBar: false};
14649

14750
var traces1 = [];
@@ -222,7 +125,7 @@
222125
marker: Object.assign({color: uniqueMethods.map(m => colorMap[m])}, barStyle),
223126
text: uniqueMethods.map(m => gpu[methods.findIndex(x => x === m)]),
224127
textposition: 'outside',
225-
textfont: {size: 9, color: getCurrentTheme() === 'dark' ? '#ccc' : '#333'}
128+
textfont: {size: 9, color: charty.getCurrentTheme() === 'dark' ? '#ccc' : '#333'}
226129
}], Object.assign({}, layout_base, {
227130
title: {text: '(c) Training Time with Downsampling Factor 8', font: {size: 14}, x: 0.5},
228131
showlegend: false,
@@ -266,7 +169,7 @@
266169
color: colorMap[method],
267170
symbol: 'circle',
268171
size: 10,
269-
line: {color: getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
172+
line: {color: charty.getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
270173
}
271174
});
272175
});
@@ -283,7 +186,7 @@
283186
color: '#666',
284187
symbol: markerShapes[ds] || 'circle',
285188
size: 10,
286-
line: {color: getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
189+
line: {color: charty.getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
287190
}
288191
});
289192
});
@@ -304,7 +207,7 @@
304207
color: colorMap[method],
305208
symbol: markerShapes[ds] || 'circle',
306209
size: 10,
307-
line: {color: getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
210+
line: {color: charty.getCurrentTheme() === 'dark' ? '#666' : '#000', width: 1}
308211
}
309212
});
310213
});
@@ -321,20 +224,15 @@
321224
}
322225

323226

324-
Papa.parse(sheetUrl, {
227+
Papa.parse(charty.sheetsUrls.Ours, {
325228
download: true,
326229
header: true,
327230

328231
complete: function(results) {
329232
var data = results.data.filter(d => d.method);
330233

331234
var uniqueMethods = [...new Set(data.map(d => d.method))];
332-
var palette = [
333-
'#7a9fdc', '#f4a876', '#8fdb8a', '#e38888', '#b18fca', '#a9806a', '#e8a4d6', '#9a9a9a', '#e3d08f', '#a7dbee',
334-
'#4878d0', '#ee854a', '#6acc64', '#d65f5f', '#956cb4', '#8c613c', '#dc7ec0', '#797979', '#d5bb67', '#82c6e2',
335-
'#2e5aa8', '#d66b28', '#4ab345', '#c03a3a', '#7a4e9d', '#6f4623', '#ca5aa9', '#5a5a5a', '#c4a73f', '#5bb0d5',
336-
'#1d4580', '#b5561a', '#359a2e', '#a02525', '#5f3880', '#543316', '#b03d91', '#3e3e3e', '#a88d25', '#3a95bf'
337-
];
235+
var palette = charty.palette;
338236
var colorMap = {};
339237
uniqueMethods.forEach((m, i) => colorMap[m] = palette[i % palette.length]);
340238

@@ -353,7 +251,7 @@
353251

354252
var methods = data.map(d => d.method);
355253
var gpu = data.map(d => d.gpu);
356-
var times = data.map(d => parseHMS(d.times));
254+
var times = data.map(d => charty.parseHMS(d.times));
357255

358256
var uniqueDownsampling = [...new Set(data.map(d => d.downsampling))].sort((a, b) => b - a);
359257

‎assets/js/charty.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const charty = (function() {
2+
let sheetsUrls = {
3+
Ours: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSgRb1CWKFvn_Yx-AJucuj9uEk9Xblfepoyr2qRcjG8m-mL7mCeNm78Pv0QuMTlVuf6rGFBaPF0bfdD/pub?gid=0&single=true&output=csv',
4+
MipNerf360: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSgRb1CWKFvn_Yx-AJucuj9uEk9Xblfepoyr2qRcjG8m-mL7mCeNm78Pv0QuMTlVuf6rGFBaPF0bfdD/pub?gid=1489703980&single=true&output=csv'
5+
};
6+
7+
let palette = [
8+
'#7a9fdc', '#f4a876', '#8fdb8a', '#e38888', '#b18fca', '#a9806a', '#e8a4d6', '#9a9a9a', '#e3d08f', '#a7dbee',
9+
'#4878d0', '#ee854a', '#6acc64', '#d65f5f', '#956cb4', '#8c613c', '#dc7ec0', '#797979', '#d5bb67', '#82c6e2',
10+
'#2e5aa8', '#d66b28', '#4ab345', '#c03a3a', '#7a4e9d', '#6f4623', '#ca5aa9', '#5a5a5a', '#c4a73f', '#5bb0d5',
11+
'#1d4580', '#b5561a', '#359a2e', '#a02525', '#5f3880', '#543316', '#b03d91', '#3e3e3e', '#a88d25', '#3a95bf'
12+
];
13+
14+
function getCurrentTheme() {
15+
const html = document.documentElement;
16+
const body = document.body;
17+
18+
if (html.classList.contains('dark') ||
19+
body.classList.contains('dark') ||
20+
html.getAttribute('data-theme') === 'dark' ||
21+
body.getAttribute('data-theme') === 'dark') {
22+
return 'dark';
23+
}
24+
return 'light';
25+
}
26+
27+
function getThemedLayoutBase() {
28+
const isDark = getCurrentTheme() === 'dark';
29+
30+
return {
31+
font: {
32+
family: 'Times New Roman, serif',
33+
size: 14,
34+
color: isDark ? '#e0e0e0' : '#000'
35+
},
36+
paper_bgcolor: isDark ? 'rgba(0,0,0,0)' : '#fff',
37+
plot_bgcolor: isDark ? '#2d2d2d' : '#fff',
38+
margin: {t: 60, b: 80, l: 70, r: 100},
39+
xaxis: {
40+
showline: true,
41+
linewidth: 1.5,
42+
linecolor: isDark ? '#666' : '#000',
43+
mirror: true,
44+
ticks: 'outside',
45+
tickwidth: 1,
46+
tickcolor: isDark ? '#666' : '#000',
47+
tickfont: {size: 11, color: isDark ? '#e0e0e0' : '#000'},
48+
showgrid: false,
49+
tickangle: -30
50+
},
51+
yaxis: {
52+
showline: true,
53+
linewidth: 1.5,
54+
linecolor: isDark ? '#666' : '#000',
55+
mirror: true,
56+
ticks: 'outside',
57+
tickwidth: 1,
58+
tickcolor: isDark ? '#666' : '#000',
59+
tickfont: {size: 11, color: isDark ? '#e0e0e0' : '#000'},
60+
showgrid: true,
61+
gridcolor: isDark ? '#444' : '#e0e0e0',
62+
gridwidth: 0.5,
63+
zeroline: false
64+
},
65+
legend: {
66+
orientation: 'v',
67+
yanchor: 'middle',
68+
y: 0.5,
69+
xanchor: 'left',
70+
x: 1.02,
71+
font: {size: 10, color: isDark ? '#e0e0e0' : '#000'},
72+
bordercolor: isDark ? '#666' : '#ccc',
73+
borderwidth: 1,
74+
bgcolor: isDark ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.9)'
75+
},
76+
bargap: 0.2,
77+
bargroupgap: 0.1
78+
};
79+
}
80+
81+
function getThemedBarStyle() {
82+
const isDark = getCurrentTheme() === 'dark';
83+
return {
84+
line: {color: isDark ? '#666' : '#000', width: 0.5}
85+
};
86+
}
87+
88+
89+
90+
function formatTime(secs) {
91+
if (!secs) return 'N/A';
92+
if (secs >= 3600) {
93+
return `${Math.floor(secs/3600)}h ${Math.floor((secs%3600)/60)}m ${Math.round(secs%60)}s`;
94+
}
95+
if (secs >= 60) {
96+
return `${Math.floor(secs/60)}m ${Math.round(secs%60)}s`;
97+
}
98+
return `${secs}s`;
99+
}
100+
101+
function parseHMS(val) {
102+
const parts = String(val).split(':').map(Number);
103+
if (parts.length === 3) {
104+
return parts[0] * 3600 + parts[1] * 60 + parts[2];
105+
}
106+
if (parts.length === 2) {
107+
return parts[0] * 60 + parts[1];
108+
}
109+
return parseFloat(val) || 0;
110+
}
111+
return {
112+
getThemedLayoutBase: getThemedLayoutBase,
113+
getThemedBarStyle: getThemedBarStyle,
114+
getCurrentTheme: getCurrentTheme,
115+
formatTime: formatTime,
116+
parseHMS: parseHMS,
117+
sheetsUrls: sheetsUrls,
118+
palette: palette
119+
}
120+
})();
121+
122+
window.charty = charty;

0 commit comments

Comments
 (0)