Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1478:82f43919f385

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Paper: Added interface screenshot and box plot example
author Brecht De Man <b.deman@qmul.ac.uk>
date Thu, 15 Oct 2015 20:10:00 +0100
parents
children 9da8a3e65a78
rev   line source
b@1478 1 <!DOCTYPE html>
b@1478 2 <html lang="en">
b@1478 3 <head>
b@1478 4 <meta charset="utf-8">
b@1478 5
b@1478 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
b@1478 7 Remove this if you use the .htaccess -->
b@1478 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
b@1478 9
b@1478 10 <title>Analysis</title>
b@1478 11 <meta name="description" content="Show results from subjective evaluation">
b@1478 12 <meta name="author" content="Brecht De Man">
b@1478 13
b@1478 14 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
b@1478 15 <script type="text/javascript">
b@1478 16 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
b@1478 17
b@1478 18 google.load("visualization", "1", {packages:["corechart"]});
b@1478 19
b@1478 20 /*************
b@1478 21 * SETUP *
b@1478 22 *************/
b@1478 23 // folder where to find the XML files
b@1478 24 xmlFileFolder = "analysis_test";
b@1478 25 // array of XML files
b@1478 26 var xmlFiles = ['QM-1-1.xml','QM-2-1.xml','QM-2-2.xml','QM-2-3.xml','QM-3-1.xml','QM-3-2.xml','QM-4-1.xml','QM-5-1.xml','QM-5-2.xml','QM-6-1.xml','QM-6-2.xml','QM-7-1.xml','QM-7-2.xml','QM-8-1.xml','QM-9-1.xml','QM-10-1.xml','QM-11-1.xml','QM-12-1.xml','QM-12-2.xml','QM-13-1.xml','QM-14-1.xml','QM-15-1.xml','QM-16-1.xml','QM-17-1.xml','QM-18-1.xml','QM-18-2.xml','QM-18-3.xml','QM-19-1.xml','QM-20-1.xml','QM-20-2.xml','QM-20-3.xml','QM-21-1.xml','QM-21-2.xml'];
b@1478 27 //['McG-A-2014-03.xml','McG-B-2014-03.xml','McG-C-2014-03.xml','McG-D-2014-03.xml','McG-E-2014-03.xml','McG-F-2014-03.xml','McG-G-2014-03.xml','McG-H-2014-03.xml'];
b@1478 28
b@1478 29 //TODO: make retrieval of file names automatic / drag files on here
b@1478 30
b@1478 31 /****************
b@1478 32 * VARIABLES *
b@1478 33 ****************/
b@1478 34
b@1478 35 // Counters
b@1478 36 // How many files, audioholders, audioelementes and statements annotated (don't count current one)
b@1478 37 var numberOfFiles = -1;
b@1478 38 var numberOfaudioholders = -1;
b@1478 39 var numberOfaudioelementes = -1;
b@1478 40 var numberOfStatements = -1;
b@1478 41 var numberOfSkippedComments = 0;
b@1478 42
b@1478 43 // Object arrays
b@1478 44 var fileNameArray = [];
b@1478 45 var subjectArray = [];
b@1478 46 var audioholderArray = [];
b@1478 47 var audioelementArray = [];
b@1478 48
b@1478 49 // End of (file, audioholder, audioelement) flags
b@1478 50 var newFile = true;
b@1478 51 var newAudioHolder = true;
b@1478 52 var newAudioElement = true;
b@1478 53
b@1478 54 var fileCounter = 0; // file index
b@1478 55 var audioholderCounter=0; // audioholder index (current XML file)
b@1478 56 var audioelementCounter=0; // audioelement index (current audioholder)
b@1478 57 var statementNumber=0; // total number of statements
b@1478 58
b@1478 59 var root; // root of XML file
b@1478 60 var commentInFull = ''; // full comment
b@1478 61
b@1478 62 var playAudio = true; // whether corresponding audio should be played back
b@1478 63
b@1478 64 // // Measuring time
b@1478 65 // var lastTimeMeasured = -1; //
b@1478 66 // var durationLastAnnotation = -1; // duration of last annotation
b@1478 67 // var timeArray = [];
b@1478 68 // var MIN_TIME = 1.0; // minimum time counted as significant
b@1478 69 // var measurementPaused = false; // whether time measurement is paused
b@1478 70 // var timeInBuffer = 0; //
b@1478 71
b@1478 72 var topLevel;
b@1478 73 window.onload = function() {
b@1478 74 // Initialise page
b@1478 75 topLevel = document.getElementById('topLevelBody');
b@1478 76 var setup = document.createElement('div');
b@1478 77 setup.id = 'setupTagDiv';
b@1478 78 loadAllFiles();
b@1478 79
b@1478 80 makePlots();
b@1478 81 // measure time at this point:
b@1478 82 lastTimeMeasured = new Date().getTime(); // in milliseconds
b@1478 83 };
b@1478 84
b@1478 85 // Assert function
b@1478 86 function assert(condition, message) {
b@1478 87 if (!condition) {
b@1478 88 message = message || "Assertion failed";
b@1478 89 if (typeof Error !== "undefined") {
b@1478 90 throw new Error(message);
b@1478 91 }
b@1478 92 throw message; // Fallback
b@1478 93 }
b@1478 94 }
b@1478 95
b@1478 96 function median(values) { // TODO: replace code by '50th percentile' - should be the same?
b@1478 97 values.sort( function(a,b) {return a - b;} );
b@1478 98 var half = Math.floor(values.length/2);
b@1478 99 if(values.length % 2)
b@1478 100 return values[half];
b@1478 101 else
b@1478 102 return (values[half-1] + values[half]) / 2.0;
b@1478 103 }
b@1478 104
b@1478 105 function percentile(values, n) {
b@1478 106 values.sort( function(a,b) {return a - b;} );
b@1478 107 // get ordinal rank
b@1478 108 var rank = Math.min(Math.floor(values.length*n/100), values.length-1);
b@1478 109 return values[rank];
b@1478 110 }
b@1478 111
b@1478 112 /***********************
b@1478 113 * TIME MEASUREMENT *
b@1478 114 ************************/
b@1478 115
b@1478 116 // measure time since last time this function was called
b@1478 117 function timeSinceLastCall() {
b@1478 118 // current time
b@1478 119 var currentTime = new Date().getTime();
b@1478 120 // calculate time difference
b@1478 121 var timeDifference = currentTime - lastTimeMeasured + timeInBuffer;
b@1478 122 // clear buffer (for pausing)
b@1478 123 timeInBuffer = 0;
b@1478 124 // remember last measured time
b@1478 125 lastTimeMeasured = currentTime;
b@1478 126 return timeDifference;
b@1478 127 }
b@1478 128
b@1478 129 // pause time measurement
b@1478 130 function pauseTimeMeasurement() {
b@1478 131 // UN-PAUSE
b@1478 132 if (measurementPaused) { // already paused
b@1478 133 // button shows 'pause' again
b@1478 134 document.getElementById('pauseButton').innerHTML = 'Pause';
b@1478 135 // toggle state
b@1478 136 measurementPaused = false;
b@1478 137 // resume time measurement
b@1478 138 lastTimeMeasured = new Date().getTime(); // reset time, discard time while paused
b@1478 139 } else { // PAUSE
b@1478 140 // button shows 'resume'
b@1478 141 document.getElementById('pauseButton').innerHTML = 'Resume';
b@1478 142 // toggle state
b@1478 143 measurementPaused = true;
b@1478 144 // pause time measurement
b@1478 145 timeInBuffer = timeSinceLastCall();
b@1478 146 }
b@1478 147 }
b@1478 148
b@1478 149 // show elapsed time on interface
b@1478 150 function showTimeElapsedInSeconds() {
b@1478 151 // if paused: un-pause
b@1478 152 if (measurementPaused) {
b@1478 153 pauseTimeMeasurement();
b@1478 154 }
b@1478 155
b@1478 156 // time of last annotation
b@1478 157 var lastAnnotationTime = timeSinceLastCall()/1000;
b@1478 158 document.getElementById('timeDisplay').innerHTML = lastAnnotationTime.toFixed(2);
b@1478 159 // average time over last ... annotations
b@1478 160 var avgAnnotationTime;
b@1478 161 var numberOfElementsToAverage =
b@1478 162 document.getElementById('numberOfTimeAverages').value;
b@1478 163 if (isPositiveInteger(numberOfElementsToAverage)) {
b@1478 164 avgAnnotationTime =
b@1478 165 calculateAverageTime(lastAnnotationTime,
b@1478 166 Number(numberOfElementsToAverage));
b@1478 167 } else {
b@1478 168 // change text field content to 'ALL'
b@1478 169 document.getElementById('numberOfTimeAverages').value = 'ALL';
b@1478 170 avgAnnotationTime = calculateAverageTime(lastAnnotationTime, -1);
b@1478 171 }
b@1478 172 document.getElementById('timeAverageDisplay').innerHTML = avgAnnotationTime.toFixed(2);
b@1478 173 }
b@1478 174
b@1478 175 // auxiliary function: is string a positive integer?
b@1478 176 // http://stackoverflow.com/questions/10834796/...
b@1478 177 // validate-that-a-string-is-a-positive-integer
b@1478 178 function isPositiveInteger(str) {
b@1478 179 var n = ~~Number(str);
b@1478 180 return String(n) === str && n >= 0;
b@1478 181 }
b@1478 182
b@1478 183 // calculate average time
b@1478 184 function calculateAverageTime(newTimeMeasurementInSeconds,numberOfPoints) {
b@1478 185 // append last measurement time to time array, if significant
b@1478 186 if (newTimeMeasurementInSeconds > MIN_TIME) {
b@1478 187 timeArray.push(newTimeMeasurementInSeconds);
b@1478 188 }
b@1478 189 // average over last N elements of this array
b@1478 190 if (numberOfPoints < 0 || numberOfPoints>=timeArray.length) { // calculate average over all
b@1478 191 var sum = 0;
b@1478 192 for (var i = 0; i < timeArray.length; i++) {
b@1478 193 sum += timeArray[i];
b@1478 194 }
b@1478 195 averageOfTimes = sum/timeArray.length;
b@1478 196 } else { // calculate average over specified number of times measured last
b@1478 197 var sum = 0;
b@1478 198 for (var i = timeArray.length-numberOfPoints; i < timeArray.length; i++) {
b@1478 199 sum += timeArray[i];
b@1478 200 }
b@1478 201 averageOfTimes = sum/numberOfPoints;
b@1478 202 }
b@1478 203 return averageOfTimes;
b@1478 204 }
b@1478 205
b@1478 206
b@1478 207 /********************************
b@1478 208 * PLAYBACK OF AUDIO *
b@1478 209 ********************************/
b@1478 210
b@1478 211 //PLAYaudioelement
b@1478 212 // Keep track of whether audio should be played
b@1478 213 function playFlagChanged(){
b@1478 214 playAudio = playFlag.checked; // global variable
b@1478 215
b@1478 216 if (!playAudio){ // if audio needs to stop
b@1478 217 audio.pause(); // stop audio - if anything is playing
b@1478 218 currently_playing = ''; // back to empty string so playaudioelement knows nothing's playing
b@1478 219 }
b@1478 220 }
b@1478 221
b@1478 222 // audioholder that's currently playing
b@1478 223 var currently_playing_audioholder = ''; // at first: empty string
b@1478 224 var currently_playing_audioelement = '';
b@1478 225 var audio;
b@1478 226
b@1478 227 // Play audioelement of audioholder if available, from start or from same position
b@1478 228 function playaudioelement(audioholderName, audioelementerName){
b@1478 229 if (playAudio) { // if enabled
b@1478 230 // get corresponding file from folder
b@1478 231 var file_location = 'audio/'+audioholderName + '/' + audioelementerName + '.mp3'; // fixed path and file name format
b@1478 232
b@1478 233 // if not available, show error/warning message
b@1478 234 //TODO ...
b@1478 235
b@1478 236 // if nothing playing yet, start playing
b@1478 237 if (currently_playing_audioholder == ''){ // signal that nothing is playing
b@1478 238 //playSound(audioBuffer);
b@1478 239 audio = new Audio(file_location);
b@1478 240 audio.loop = true; // loop when end is reached
b@1478 241 audio.play();
b@1478 242 currently_playing_audioholder = audioholderName;
b@1478 243 currently_playing_audioelement = audioelementerName;
b@1478 244 } else if (currently_playing_audioholder != audioholderName) {
b@1478 245 // if different audioholder playing, stop that and start playing
b@1478 246 audio.pause(); // stop audio
b@1478 247 audio = new Audio(file_location); // load new file
b@1478 248 audio.loop = true; // loop when end is reached
b@1478 249 audio.play(); // play audio from the start
b@1478 250 currently_playing_audioholder = audioholderName;
b@1478 251 currently_playing_audioelement = audioelementerName;
b@1478 252 } else if (currently_playing_audioelement != audioelementerName) {
b@1478 253 // if same audioholder playing, start playing from where it left off
b@1478 254 skipTime = audio.currentTime; // time to skip to
b@1478 255 audio.pause(); // stop audio
b@1478 256 audio = new Audio(file_location);
b@1478 257 audio.addEventListener('loadedmetadata', function() {
b@1478 258 this.currentTime = skipTime;
b@1478 259 console.log('Loaded '+audioholderName+'-'+audioelementerName+', playing from '+skipTime);
b@1478 260 }, false); // skip to same time when audio is loaded!
b@1478 261 audio.loop = true; // loop when end is reached
b@1478 262 audio.play(); // play from that time
b@1478 263 audio.currentTime = skipTime;
b@1478 264 currently_playing_audioholder = audioholderName;
b@1478 265 currently_playing_audioelement = audioelementerName;
b@1478 266 }
b@1478 267 // if same audioelement playing: keep on playing (i.e. do nothing)
b@1478 268 }
b@1478 269 }
b@1478 270
b@1478 271 /********************
b@1478 272 * READING FILES *
b@1478 273 ********************/
b@1478 274
b@1478 275 // Read necessary data from XML file
b@1478 276 function readXML(xmlFileName){
b@1478 277 if (window.XMLHttpRequest)
b@1478 278 {// code for IE7+, Firefox, Chrome, Opera, Safari
b@1478 279 xmlhttp=new XMLHttpRequest();
b@1478 280 }
b@1478 281 else
b@1478 282 {// code for IE6, IE5
b@1478 283 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
b@1478 284 }
b@1478 285 xmlhttp.open("GET",xmlFileName,false);
b@1478 286 xmlhttp.send();
b@1478 287 return xmlhttp.responseXML;
b@1478 288 }
b@1478 289
b@1478 290 // go over all files and compute relevant statistics
b@1478 291 function loadAllFiles() {
b@1478 292 // retrieve information from XMLs
b@1478 293
b@1478 294 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
b@1478 295 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
b@1478 296 xml = readXML(xmlFileName);
b@1478 297 if (xml != null) { // if file exists
b@1478 298 // append file name to array of file names
b@1478 299 fileNameArray.push(xmlFiles[fileIndex]);
b@1478 300
b@1478 301 // get root of XML file
b@1478 302 root = xml.getElementsByTagName('browserevaluationresult')[0];
b@1478 303
b@1478 304 // get subject ID, add to array if not already there
b@1478 305 pretest = root.getElementsByTagName('pretest')[0];
b@1478 306 subjectID = pretest.getElementsByTagName('comment')[0];
b@1478 307 if (subjectID.getAttribute('id')!='sessionId') { // warning in console when not available
b@1478 308 console.log(xmlFiles[fileIndex]+': no SessionID available');
b@1478 309 }
b@1478 310 if (subjectArray.indexOf(subjectID.textContent) == -1) { // if not already in array
b@1478 311 subjectArray.push(subjectID.textContent); // append to array
b@1478 312 }
b@1478 313
b@1478 314 // go over all audioholders, add to array if not already there
b@1478 315 audioholderNodes = root.getElementsByTagName('audioholder');
b@1478 316 // go over audioholderNodes and append audioholder name when not present yet
b@1478 317 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
b@1478 318 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
b@1478 319 if (audioholderArray.indexOf(audioholderName) == -1) { // if not already in array
b@1478 320 audioholderArray.push(audioholderName); // append to array
b@1478 321 }
b@1478 322 // within each audioholder, go over all audioelement IDs, add to array if not already there
b@1478 323 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
b@1478 324 for (audioelementIndex = 0; audioelementIndex < audioelementNodes.length; audioelementIndex++) {
b@1478 325 audioelementName = audioelementNodes[audioelementIndex].getAttribute('id');
b@1478 326 if (audioelementArray.indexOf(audioelementName) == -1) { // if not already in array
b@1478 327 audioelementArray.push(audioelementName); // append to array
b@1478 328 }
b@1478 329 }
b@1478 330 }
b@1478 331 // count occurrences of each audioholder
b@1478 332 // ...
b@1478 333 }
b@1478 334 else {
b@1478 335 console.log('XML file '+xmlFileName+' not found.');
b@1478 336 }
b@1478 337 }
b@1478 338
b@1478 339 // sort alphabetically
b@1478 340 fileNameArray.sort();
b@1478 341 subjectArray.sort();
b@1478 342 audioholderArray.sort();
b@1478 343 audioelementArray.sort();
b@1478 344
b@1478 345 // display all information in HTML
b@1478 346 // show XML file folder
b@1478 347 document.getElementById('xmlFileFolder_span').innerHTML = "\""+xmlFileFolder+"/\"";
b@1478 348 // show number of files
b@1478 349 document.getElementById('numberOfFiles_span').innerHTML = fileNameArray.length;
b@1478 350 // show list of subject names
b@1478 351 document.getElementById('subjectArray_span').innerHTML = subjectArray.toString();
b@1478 352 // show list of audioholders
b@1478 353 document.getElementById('audioholderArray_span').innerHTML = audioholderArray.toString();
b@1478 354 // show list of audioelementes
b@1478 355 document.getElementById('audioelementArray_span').innerHTML = audioelementArray.toString();
b@1478 356 }
b@1478 357
b@1478 358 function makePlots() { //TODO: split into different functions
b@1478 359 // TEMPORARY
b@1478 360 makeTimeline(xmlFileFolder+"/"+xmlFiles[7]);
b@1478 361
b@1478 362 // create value array
b@1478 363 var ratings = []; // 3D matrix of ratings (audioholder, audioelement, subject)
b@1478 364 for (audioholderIndex = 0; audioholderIndex < audioholderArray.length; audioholderIndex++) {
b@1478 365 ratings.push([]);
b@1478 366 for (audioelementIndex = 0; audioelementIndex < audioelementArray.length; audioelementIndex++) {
b@1478 367 ratings[audioholderIndex].push([]);
b@1478 368 }
b@1478 369 }
b@1478 370
b@1478 371 // go over all XML files
b@1478 372 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
b@1478 373 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
b@1478 374 xml = readXML(xmlFileName);
b@1478 375 if (xml != null) { // if file exists
b@1478 376 // get root of XML file
b@1478 377 root = xml.getElementsByTagName('browserevaluationresult')[0];
b@1478 378 // go over all audioholders
b@1478 379 audioholderNodes = root.getElementsByTagName('audioholder');
b@1478 380 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
b@1478 381 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
b@1478 382 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
b@1478 383 // go over all audioelements
b@1478 384 for (audioelementIndex = 0; audioelementIndex < audioelementNodes.length; audioelementIndex++) {
b@1478 385 audioelementName = audioelementNodes[audioelementIndex].getAttribute('id');
b@1478 386 // get value
b@1478 387 var value = audioelementNodes[audioelementIndex].getElementsByTagName("value")[0].textContent;
b@1478 388 if (value) { // if not empty, null, undefined...
b@1478 389 ratingValue = parseFloat(value);
b@1478 390 // add to matrix at proper position
b@1478 391 aHidx = audioholderArray.indexOf(audioholderName);
b@1478 392 aEidx = audioelementArray.indexOf(audioelementName);
b@1478 393 ratings[aHidx][aEidx].push(ratingValue);
b@1478 394 }
b@1478 395 }
b@1478 396 }
b@1478 397
b@1478 398 // go over all audioholders
b@1478 399
b@1478 400 // go over all audioelements within audioholder, see if present in idMatrix, add if not
b@1478 401 // add corresponding rating to 'ratings', at position corresponding with position in idMatrix
b@1478 402 }
b@1478 403 }
b@1478 404
b@1478 405 for (audioholderIndex = 0; audioholderIndex < audioholderArray.length; audioholderIndex++) {
b@1478 406 audioholderName = audioholderArray[audioholderIndex]; // for this song
b@1478 407 tickArray = []
b@1478 408
b@1478 409 raw_data = [['SubjectID', 'Rating']];
b@1478 410 audioElIdx = 0;
b@1478 411 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
b@1478 412 if (ratings[audioholderIndex][audioelementIndex].length>0) {
b@1478 413 audioElIdx++; // increase if not empty
b@1478 414 // make tick label
b@1478 415 tickArray.push({v:audioElIdx, f: audioelementArray[audioelementIndex]});
b@1478 416 }
b@1478 417 for (subject = 0; subject<ratings[audioholderIndex][audioelementIndex].length; subject++){
b@1478 418 // add subject-value pair for each subject
b@1478 419 raw_data.push([audioElIdx, ratings[audioholderIndex][audioelementIndex][subject]]);
b@1478 420 }
b@1478 421 }
b@1478 422
b@1478 423 // create plot (one per song)
b@1478 424 var data = google.visualization.arrayToDataTable(raw_data);
b@1478 425
b@1478 426 var options = {
b@1478 427 title: audioholderName,
b@1478 428 hAxis: {title: 'audioelement ID', minValue: 0, maxValue: audioElIdx+1,
b@1478 429 ticks: tickArray},
b@1478 430 vAxis: {title: 'Rating', minValue: 0, maxValue: 1},
b@1478 431 seriesType: 'scatter',
b@1478 432 legend: 'none'
b@1478 433 };
b@1478 434 var div = document.createElement('div');
b@1478 435 document.body.appendChild(div);
b@1478 436 div.id = 'div_'+audioholderName;
b@1478 437 div.style.width = '1100px';
b@1478 438 div.style.height = '350px';
b@1478 439 var chart = new google.visualization.ComboChart(document.getElementById('div_'+audioholderName));
b@1478 440 chart.draw(data, options);
b@1478 441
b@1478 442 // box plots
b@1478 443 var div = document.createElement('div');
b@1478 444 document.body.appendChild(div);
b@1478 445 div.id = 'div_box_'+audioholderName;
b@1478 446 div.style.width = '1100px';
b@1478 447 div.style.height = '350px';
b@1478 448 // Get median, percentiles, maximum and minimum; outliers.
b@1478 449 pctl25 = [];
b@1478 450 pctl75 = [];
b@1478 451 med = [];
b@1478 452 min = [];
b@1478 453 max = [];
b@1478 454 outlierArray = [];
b@1478 455 max_n_outliers = 0; // maximum number of outliers for one audioelement
b@1478 456 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
b@1478 457 med.push(median(ratings[audioholderIndex][audioelementIndex])); // median
b@1478 458 pctl25.push(percentile(ratings[audioholderIndex][audioelementIndex], 25)); // 25th percentile
b@1478 459 pctl75.push(percentile(ratings[audioholderIndex][audioelementIndex], 75)); // 75th percentile
b@1478 460 IQR = pctl75[pctl75.length-1]-pctl25[pctl25.length-1];
b@1478 461 // outliers: range of values which is above pctl75+1.5*IQR or below pctl25-1.5*IQR
b@1478 462 outliers = [];
b@1478 463 rest = [];
b@1478 464 for (idx = 0; idx<ratings[audioholderIndex][audioelementIndex].length; idx++){
b@1478 465 if (ratings[audioholderIndex][audioelementIndex][idx] > pctl75[pctl75.length-1]+1.5*IQR ||
b@1478 466 ratings[audioholderIndex][audioelementIndex][idx] < pctl25[pctl25.length-1]-1.5*IQR){
b@1478 467 outliers.push(ratings[audioholderIndex][audioelementIndex][idx]);
b@1478 468 }
b@1478 469 else {
b@1478 470 rest.push(ratings[audioholderIndex][audioelementIndex][idx]);
b@1478 471 }
b@1478 472 }
b@1478 473 outlierArray.push(outliers);
b@1478 474 max_n_outliers = Math.max(max_n_outliers, outliers.length); // update max mber
b@1478 475 // max: maximum value which is not outlier
b@1478 476 max.push(Math.max.apply(null, rest));
b@1478 477 // min: minimum value which is not outlier
b@1478 478 min.push(Math.min.apply(null, rest));
b@1478 479 }
b@1478 480
b@1478 481 // Build data array
b@1478 482 boxplot_data = [['ID', 'Span', '', '', '', 'Median']];
b@1478 483 for (idx = 0; idx < max_n_outliers; idx++) {
b@1478 484 boxplot_data[0].push('Outlier');
b@1478 485 }
b@1478 486 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
b@1478 487 if (ratings[audioholderIndex][audioelementIndex].length>0) { // if rating array not empty for this audioelement
b@1478 488 data_array = [
b@1478 489 audioelementArray[audioelementIndex], // name
b@1478 490 min[audioelementIndex], // minimum
b@1478 491 pctl75[audioelementIndex],
b@1478 492 pctl25[audioelementIndex],
b@1478 493 max[audioelementIndex], // maximum
b@1478 494 med[audioelementIndex]
b@1478 495 ];
b@1478 496 for (idx = 0; idx < max_n_outliers; idx++) {
b@1478 497 if (idx<outlierArray[audioelementIndex].length){
b@1478 498 data_array.push(outlierArray[audioelementIndex][idx]);
b@1478 499 }
b@1478 500 else {
b@1478 501 data_array.push(null);
b@1478 502 }
b@1478 503 }
b@1478 504 boxplot_data.push(data_array);
b@1478 505 }
b@1478 506 }
b@1478 507
b@1478 508 // Create and populate the data table.
b@1478 509 var data = google.visualization.arrayToDataTable(boxplot_data);
b@1478 510 // Create and draw the visualization.
b@1478 511 var ac = new google.visualization.ComboChart(document.getElementById('div_box_'+audioholderName));
b@1478 512 ac.draw(data, {
b@1478 513 title : audioholderName,
b@1478 514 //width: 600,
b@1478 515 //height: 400,
b@1478 516 vAxis: {title: "Rating"},
b@1478 517 hAxis: {title: "audioelement ID"},
b@1478 518 seriesType: "line",
b@1478 519 pointSize: 5,
b@1478 520 lineWidth: 0,
b@1478 521 colors: ['black'],
b@1478 522 series: { 0: {type: "candlesticks", color: 'blue'}, // box plot shape
b@1478 523 1: {type: "line", pointSize: 10, lineWidth: 0, color: 'red' } }, // median
b@1478 524 legend: 'none'
b@1478 525 });
b@1478 526 }
b@1478 527 }
b@1478 528
b@1478 529 function makeTimeline(xmlFileName){ // WIP
b@1478 530 // Based on the XML file name, take time data and plot playback and marker movements
b@1478 531
b@1478 532 // read XML file and check if exists
b@1478 533 xml = readXML(xmlFileName);
b@1478 534 if (!xml) { // if file does not exist
b@1478 535 console.log('XML file '+xml+'does not exist. ('+xmlFileName+')')
b@1478 536 return; // do nothing; exit function
b@1478 537 }
b@1478 538 // get root of XML file
b@1478 539 root = xml.getElementsByTagName('browserevaluationresult')[0];
b@1478 540
b@1478 541 audioholder_time = 0;
b@1478 542 previous_audioholder_time = 0; // time spent before current audioholder
b@1478 543 time_offset = 0; // test starts at zero
b@1478 544
b@1478 545 // go over all audioholders
b@1478 546 audioholderNodes = root.getElementsByTagName('audioholder');
b@1478 547 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
b@1478 548 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
b@1478 549 if (!audioholderName) {
b@1478 550 console.log('audioholder name is empty; go to next one. ('+xmlFileName+')');
b@1478 551 break;
b@1478 552 }
b@1478 553
b@1478 554 // subtract total audioholder length from subsequent audioholder event times
b@1478 555 audioholder_children = audioholderNodes[audioholderIndex].childNodes;
b@1478 556 foundIt = false;
b@1478 557 console.log(audioholder_children[2].getElementsByTagName("metricResult")) // not working!
b@1478 558 for (idx = 0; idx<audioholder_children.length; idx++) { // go over children
b@1478 559
b@1478 560 if (audioholder_children[idx].getElementsByTagName('metricResult').length) {
b@1478 561 console.log(audioholder_children[idx].getElementsByTagName('metricResult')[0]);
b@1478 562 if (audioholder_children[idx].getElementsByTagName('metricResult')[0].getAttribute('id') == "testTime"){
b@1478 563 audioholder_time = parseFloat(audioholder_children[idx].getElementsByTagName('metricResult')[0].textContent);
b@1478 564 console.log(audioholder_time);
b@1478 565 foundIt = true;
b@1478 566 }
b@1478 567 }
b@1478 568 }
b@1478 569 if (!foundIt) {
b@1478 570 console.log("Skipping audioholder without total time specified from "+xmlFileName+"."); // always hitting this
b@1478 571 break;
b@1478 572 }
b@1478 573
b@1478 574 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
b@1478 575
b@1478 576 // make div
b@1478 577
b@1478 578 // draw chart
b@1478 579
b@1478 580 // legend with audioelement names
b@1478 581 }
b@1478 582 }
b@1478 583
b@1478 584 </script>
b@1478 585
b@1478 586
b@1478 587
b@1478 588 <style>
b@1478 589 div {
b@1478 590 padding: 2px;
b@1478 591 margin-top: 2px;
b@1478 592 margin-bottom: 2px;
b@1478 593 }
b@1478 594 div.head{
b@1478 595 margin-left: 10px;
b@1478 596 border: black;
b@1478 597 border-width: 2px;
b@1478 598 border-style: solid;
b@1478 599 }
b@1478 600 div.attrib{
b@1478 601 margin-left:25px;
b@1478 602 border: black;
b@1478 603 border-width: 2px;
b@1478 604 border-style: dashed;
b@1478 605 margin-bottom: 10px;
b@1478 606 }
b@1478 607 div#headerMatter{
b@1478 608 background-color: #FFFFCC;
b@1478 609 }
b@1478 610 div#currentStatement{
b@1478 611 font-size:3.0em;
b@1478 612 font-weight: bold;
b@1478 613
b@1478 614 }
b@1478 615 div#debugDisplay {
b@1478 616 color: #CCCCCC;
b@1478 617 font-size:0.3em;
b@1478 618 }
b@1478 619 span#scoreDisplay {
b@1478 620 font-weight: bold;
b@1478 621 }
b@1478 622 div#wrapper {
b@1478 623 width: 780px;
b@1478 624 border: 1px solid black;
b@1478 625 overflow: hidden; /* add this to contain floated children */
b@1478 626 }
b@1478 627 div#instrumentSection {
b@1478 628 width: 250px;
b@1478 629 border: 1px solid red;
b@1478 630 display: inline-block;
b@1478 631 }
b@1478 632 div#featureSection {
b@1478 633 width: 250px;
b@1478 634 border: 1px solid green;
b@1478 635 display: inline-block;
b@1478 636 }
b@1478 637 div#valenceSection {
b@1478 638 width: 250px;
b@1478 639 border: 1px solid blue;
b@1478 640 display: inline-block;
b@1478 641 }
b@1478 642 button#previousComment{
b@1478 643 width: 120px;
b@1478 644 height: 150px;
b@1478 645 font-size:1.5em;
b@1478 646 }
b@1478 647 button#nextComment{
b@1478 648 width: 666px;
b@1478 649 height: 150px;
b@1478 650 font-size:1.5em;
b@1478 651 }
b@1478 652 ul
b@1478 653 {
b@1478 654 list-style-type: none; /* no bullet points */
b@1478 655 margin-left: -20px; /* less indent */
b@1478 656 margin-top: 0px;
b@1478 657 margin-bottom: 5px;
b@1478 658 }
b@1478 659 </style>
b@1478 660
b@1478 661 </head>
b@1478 662
b@1478 663 <body>
b@1478 664 <h1>Subjective evaluation results</h1>
b@1478 665
b@1478 666 <div id="debugDisplay">
b@1478 667 XML file folder: <span id="xmlFileFolder_span"></span>
b@1478 668 </div>
b@1478 669
b@1478 670 <div id="headerMatter">
b@1478 671 <div>
b@1478 672 <strong>Result XML files:</strong> <span id="numberOfFiles_span"></span>
b@1478 673 </div>
b@1478 674 <div>
b@1478 675 <strong>Audioholders in dataset:</strong> <span id="audioholderArray_span"></span>
b@1478 676 </div>
b@1478 677 <div>
b@1478 678 <strong>Subjects in dataset:</strong> <span id="subjectArray_span"></span>
b@1478 679 </div>
b@1478 680 <div>
b@1478 681 <strong>Audioelements in dataset:</strong> <span id="audioelementArray_span"></span>
b@1478 682 </div>
b@1478 683 <br>
b@1478 684 </div>
b@1478 685 <br>
b@1478 686
b@1478 687 <!-- Show time elapsed
b@1478 688 The last annotation took <strong><span id="timeDisplay">(N/A)</span></strong> seconds.
b@1478 689 <br>-->
b@1478 690
b@1478 691 </body>
b@1478 692 </html>