batchnorm/plot-torchvision.js at master · domainadaptation/batchnorm · 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

function get_datasets() {
    var colors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
    var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a'];
    var table = torchvision_models();
    var models = new Set(table.model);
    var modelclasses = new Set(table.modelclass);

    var colorMap = {};
    [...modelclasses].forEach((model, idx) => {
        colorMap[model] = colors[idx];
    })

    console.log(colorMap);

    datasets = [];
    [...models].forEach((model, index) => {
        entry = {
            label: table.modelclass[index],
            data: [],
            borderColor: colorMap[table.modelclass[index]],
            backgroundColor: colorMap[table.modelclass[index]],
            //borderDash: [5, 5],
            fill: false
        }
        table.model
            .map((el, idx) => { return { "model": el, "x": table.in[idx], "y": table.inc[idx] }; })
            .filter(el => (el.model === model))
            .forEach((el, idx) => {
                entry.data.push({
                    'x': parseFloat(el.x),
                    'y': parseFloat(el.y)
                });
            });
        datasets.push(entry);
    });

    console.log(datasets);
    return datasets;
}
get_datasets();

var config_torchvision = {
    type: 'line',
    data: {
        datasets: get_datasets()
    },
    options: {
        responsive: true,
        title: {
            display: false,
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                display: true,
                type: "linear",
                ticks: {
                    min: 20,
                    max: 40
                },
                scaleLabel: {
                    display: true,
                    labelString: 'ImageNet Error'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Mean Corruption Error'
                },
                ticks: {
                    min: 40,
                    max: 100
                },
            }]
        }
    }
};