function showCluster()

in cluster_vis/data/clustervis.js [74:143]


function showCluster(id) {
    $('#results').html('');
    let classes = {};
    $.each(clusterData[currDataset].clusters[id], function (i, video) {
        let url = 'https://www.youtube.com/embed/' + video[0] + '?start=' + video[1] + '&end=' + video[2];
        $('<div class="result">')
            .data('video', url)
            .append($('<p>').html(video[3]))
            .appendTo('#results');
        classes[video[3]] = (classes[video[3]] || 0) + 1;
    });
    let items = Object.keys(classes).map(function(key) {
        return [key, classes[key]];
    });
    items.sort(function(first, second) {
        return second[1] - first[1];
    });
    let chartLabels = [];
    let datasets = [];
    let categories = Object.keys(graphColors);
    for (let i=0; i<categories.length; i++) {
        datasets.push({
                minBarLength: 2,
                label: categories[i],
				backgroundColor: graphColors[categories[i]],
				borderColor: graphColors[categories[i]],
				borderWidth: 1,
                data: []
            });
    }
    $.each(items, function(index, className) {
        let cat = clusterData[currDataset].metaclasses[className[0]];
        chartLabels.push(className[0]);
        for (let i=0; i<categories.length; i++) {
            if (categories[i] === cat) {
                datasets[i].data.push(className[1]);
            }else{
                datasets[i].data.push(NaN);
            }
        }
    });
    if (window.clusterBarChart)
        window.clusterBarChart.destroy();
    let ctx = document.getElementById('chart-canvas').getContext('2d');
    window.clusterBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartLabels,
            datasets: datasets
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'ground truth label distribution in this cluster'
            },
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });

    $('#cluster-title').text($("#datasetSelect option:selected").text() +' Cluster '+id+' (entropy: ' + entropy[id].toFixed(3) + ')');
    loadVisible();
}