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();
}