added score_by_dump plot

index.html

@@ -660,7 +660,12 @@
         the last 3 checkpoints for both seeds and plotted the average of these 6 data points per dump. </p>
     <p>The plot below clearly shows that some dumps perform far
         worse than others. Each year has a different color, and the number of crawls per year also changes.</p>
-    <figure><img src="plots/score_by_dump.png"/></figure>
+
+    <div class="main-plot-container l-page">
+        <figure><img src="plots/score_by_dump.png"/></figure>
+        <div id="plot-score_by_dump"></div>
+    </div>
+
     <p>We identified 5 main relevant time intervals:</p>
     <ul>
         <li>2013 to 2016: relatively stable, average quality</li>

src/plotting.js

@@ -1,10 +1,9 @@
 const TASK_ID_TO_NAME = {
     'agg_score': 'Aggregate Score',
-    'commonsense_qa/acc_norm': 'Commonsense QA Norm',
-    'hellaswag/acc_norm': 'HellaSwag Norm',
-    'openbookqa/acc_norm': 'OpenBook QA Norm',
+    'commonsense_qa/acc_norm': 'Commonsense QA',
+    'hellaswag/acc_norm': 'HellaSwag',
+    'openbookqa/acc_norm': 'OpenBook QA',
     'piqa/acc_norm': 'PIQA',
-    'siqa/acc_norm': 'Social IQA',
     'winogrande/acc_norm': 'WinoGrande',
     'arc/acc_norm': 'ARC',
     'mmlu/acc_norm': 'MMLU'
@@ -82,38 +81,41 @@ const init_plot = function() {
         plotElements.forEach(async (plotElement) => {
             const plotName = plotElement.id.replace('plot-', '');
             const data = await fetch(`data/plots/${plotName}.json`).then((response) => response.json());
-            const {dropdown, slider, plot} = createPlottingElements(plotElement, data.data, data.defaultMetric ?? "agg_score", data.defaultWindowSize ?? 0);
+            const {dropdown, slider, plot} = createPlottingElements(plotElement, data.data ?? data.traces, data.defaultMetric ?? "agg_score", data.defaultWindowSize ?? 0, data.createSlider ?? 1);
             plot.id = `graph-${plotName}`;
             dropdown.addEventListener('change', () => updatePlot(dropdown, slider));
             let timeoutId;
             // Debounce the slider
-            slider.addEventListener('input', () => {
-                clearTimeout(timeoutId);
-                timeoutId = setTimeout(() => {
-                    updatePlot(dropdown, slider);
-                }, 500);
-            });
+            if (slider)
+                slider.addEventListener('input', () => {
+                    clearTimeout(timeoutId);
+                    timeoutId = setTimeout(() => {
+                        updatePlot(dropdown, slider);
+                    }, 500);
+                });
 
             function updatePlot(dropdown, slider) {
                 const metric = dropdown.value;
-                const sliderValue = parseInt(slider.value);
-                const traces = [];
-                const metricData = data.data[metric];
-                for (const key in metricData) {
-                    const y = rollingWindow(metricData[key].y, sliderValue);
-                    const x = metricData[key].x.slice(0, y.length);
-                    const trace = {
-                        x: x,
-                        y: y,
-                        type: 'scatter',
-                        mode: 'lines',
-                        line: {
-                            width: 2.5
-                        },
-                        name: metricData[key].label
-                    };
-                    traces.push(trace);
+                const sliderValue = parseInt(slider?.value ?? 0);
+                const traces = "traces" in data ? data.traces[metric] : [];
+                if (!("traces" in data)) {
+                    const metricData = data.data[metric];
+                    for (const key in metricData) {
+                        const y = rollingWindow(metricData[key].y, sliderValue);
+                        const x = metricData[key].x.slice(0, y.length);
+                        const trace = {
+                            x: x,
+                            y: y,
+                            type: 'scatter',
+                            mode: 'lines',
+                            line: {
+                                width: 2.5
+                            },
+                            name: metricData[key].label
+                        };
+                        traces.push(trace);
                     }
+                }
                 let minX = Math.min(...traces.flatMap(trace => trace.x));
                 let maxX = Math.max(...traces.flatMap(trace => trace.x));
                 const width = plot.parentElement.offsetWidth;
@@ -150,7 +152,7 @@ const getSliderMax = (data) => {
     return 30;
 }
 
-const createPlottingElements = (plotElement, data, defaultMetric, defaultWindowSize) => {
+const createPlottingElements = (plotElement, data, defaultMetric, defaultWindowSize, createSlider) => {
     // Create plot
     const plot = document.createElement('figure');
     const controls = document.createElement('div');
@@ -160,7 +162,7 @@ const createPlottingElements = (plotElement, data, defaultMetric, defaultWindowS
     plotElement.appendChild(controls);
 
 
-    const metricOptions = Object.keys(data);
+    const metricOptions = Object.keys(data).filter(metric => metric in TASK_ID_TO_NAME);
     // Dropdown
     const dropdownLabel = document.createElement('label');
     dropdownLabel.textContent = 'Metric:';
@@ -173,6 +175,8 @@ const createPlottingElements = (plotElement, data, defaultMetric, defaultWindowS
     dropdownContainer.appendChild(dropdown);
     controls.appendChild(dropdownContainer);
 
+    if (!createSlider)
+        return {dropdown, undefined, plot};
     // Slider
     const sliderLabel = document.createElement('label');
     sliderLabel.textContent = 'Rolling window:';