diff --git a/graphs.php b/graphs.php index 08a23a5..8c33360 100644 --- a/graphs.php +++ b/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,23 +247,30 @@ 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("talk2", plot2Div, d2, params); - drawGraph("talk3", plot3Div, d3, params); + drawGraph("talk1", plot1Div, d1, params, stats1Div); + drawGraph("talk2", plot2Div, d2, params, stats2Div); + 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 = [ /* { name: "Mean",