From 6fc9310751e0df71cc9e2cd680f7c6cbcb8fb5b7 Mon Sep 17 00:00:00 2001
From: Ruben <r@rubenvandeven.com>
Date: Mon, 4 Dec 2017 22:01:15 +0100
Subject: [PATCH] Styling changes and added new annotations

---
 graphs.php | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/graphs.php b/graphs.php
index 3cfb16d..08a23a5 100644
--- a/graphs.php
+++ b/graphs.php
@@ -13,8 +13,8 @@ var d3 = <?php echo require "output/talk3.json" ?>;
 	<style type="text/css">
 		body{
 			font-family: sans-serif;
-			width:calc(100% - 10em);
-			margin-left:10%;
+			width:calc(88%);
+			margin-left:12%;
 			margin-right:0;
 		}
 		#scroller{
@@ -34,7 +34,7 @@ var d3 = <?php echo require "output/talk3.json" ?>;
 		}
 		#checkboxes{
 			font-size: .8em;
-			width: 10em;
+			width: 13em;
 			position:absolute;
 			left:0;
 			top:0;
@@ -42,6 +42,13 @@ var d3 = <?php echo require "output/talk3.json" ?>;
 		label{
 			display:block;
 		}
+		.legendColour{
+			width:1em;
+			height:1em;
+			display:inline-block;
+			float:right;
+			margin-top:0.6em;
+		}
 		#checkboxes span{
 			color: gray;
 		}
@@ -54,6 +61,8 @@ var d3 = <?php echo require "output/talk3.json" ?>;
 		
 		#imgwrap img{
 			width:90%;
+			margin-left:2%;
+			margin-top:1em;
 		}
 		h1{
 			margin: .1em 0;
@@ -142,6 +151,29 @@ defaultFacialParameters = [
 	//~ "jawDrop", //
 ];
 
+var paramColours = {
+	"smile":"#FFA500",
+	"innerBrowRaise":"#FF3300",
+	"browRaise":"#FF003D",
+	"browFurrow":"#FF0095",
+	"noseWrinkle":"#E000FF",
+	"upperLipRaise":"#9B00FF",
+	"lipCornerDepressor":"#5800FF",
+	"chinRaise":"#0053FF",
+	"lipPucker":"#00C1FF",
+	"lipPress":"#00FF8C",
+	"lipSuck":"#0BFF00",
+	"mouthOpen":"#8CFF00",
+	"smirk":"#DCFF00",
+	"eyeClosure":"#A3841A",
+	"eyeWiden":"#852D0C",
+	"cheekRaise":"#850C3B",
+	"lidTighten":"#301271",
+	"dimpler":"#214761",
+	"lipStretch":"#216156",
+	"jawDrop":"#326121",
+}
+
 function getCheckedParams(){
 	params = [];
 	for(var i in facialParameters){
@@ -168,6 +200,12 @@ for(var i in facialParameters){
 	 spanEl.innerHTML = param;
 	 labelEl.appendChild(spanEl);
 	 
+	 var spanColourEl = document.createElement('span');
+	 spanColourEl.style.background = paramColours[param];
+	 spanColourEl.innerHTML = "&nbsp;";
+	 spanColourEl.classList.add('legendColour');
+	 labelEl.appendChild(spanColourEl);
+	 
 	 checkboxWrapperEl.appendChild(labelEl);
 }
 
@@ -214,6 +252,10 @@ function drawGraph(id, targetEl, d, params) {
 		x: d['windows'].map(function(w){return w['start'];}),
 		y: paramValues,
 		type: 'scatter',
+		line: {
+			color: paramColours[param],
+			width: 1.5
+		  }
 	  });
 	  avgV[param] = _.mean(paramValues);
 	}