WIP. add expressiveness counters

graphs.php

@@ -185,7 +185,47 @@ function getCheckedParams(){
 	return params;
 }
 
+// expresiveness = average change in value
+function getExpressivenessForParams(d, params)
+{
+	let total = 0;
+	let nrs = 0;
+	for(let i in d['windows']) {
+		if(i == 0) {
+			continue;
+		}
+		nrs++;
+		let sub = 0;
+		for(let p in params) {
+			let param = params[p];
+			sub += Math.pow(d['windows'][i-1]['params'][param] - d['windows'][i]['params'][param], 2);
+		}
+		total += Math.sqrt(sub);
+	}
+	return total/nrs;
+}
+
+function getExpressivenessPerParam(d, params)
+{
+	let paramValues = {};
+	for(let p in params) {
+		let param = params[p];
+		let value = 0;
+		for(let i in d['windows']) {
+			if(i == 0) {
+				continue;
+			}
+			value += Math.abs(d['windows'][i-1]['params'][param] - d['windows'][i]['params'][param]);
+		}
+		paramValues[param] = value / (d['windows'].length - 1);
+	}
+	return paramValues;
+}
+
 var checkboxWrapperEl = document.getElementById("checkboxes");
+var d1ParamExpressiveness = getExpressivenessPerParam(d1, facialParameters);
+var d2ParamExpressiveness = getExpressivenessPerParam(d2, facialParameters);
+var d3ParamExpressiveness = getExpressivenessPerParam(d3, facialParameters);
 for(var i in facialParameters){
 	let param = facialParameters[i];
 	 var labelEl = document.createElement('label');
@@ -207,22 +247,29 @@ for(var i in facialParameters){
 	 labelEl.appendChild(spanColourEl);
 	 
 	 checkboxWrapperEl.appendChild(labelEl);
+
+	 labelEl.title = "Expressiveness: " + d1ParamExpressiveness[param] + ", " + d2ParamExpressiveness[param] + ", " + d3ParamExpressiveness[param];
 }
 
 var imgEl = document.getElementById("hoverimg");
 var plot1Div = document.getElementById('plot1-div');
 var plot2Div = document.getElementById('plot2-div');
 var plot3Div = document.getElementById('plot3-div');
+var stats1Div = document.getElementById('plot1-stats');
+var stats2Div = document.getElementById('plot2-stats');
+var stats3Div = document.getElementById('plot3-stats');
 
 function drawGraphs(){
 	params = getCheckedParams();	
-	drawGraph("talk1", plot1Div, d1, params);
+	drawGraph("talk1", plot1Div, d1, params, stats1Div);
-	drawGraph("talk2", plot2Div, d2, params);
+	drawGraph("talk2", plot2Div, d2, params, stats2Div);
-	drawGraph("talk3", plot3Div, d3, params);
+	drawGraph("talk3", plot3Div, d3, params, stats3Div);
 }
 	
 
-function drawGraph(id, targetEl, d, params) {
+function drawGraph(id, targetEl, d, params, statsEl) {
+	
+	statsEl.innerHTML = "Total expressiveness: " + getExpressivenessForParams(d, params);
 
 	var data = [
 	 /* {