Visuals & score differentiation calculation

src/index.md

@@ -12,7 +12,8 @@ const coerceGameData = (d, i) => ({
   sU: Number(d.sU),
   ou: Number(d.ou),
   week: parseWeek(d.week),
-  pScore: d.pScore
+  pScore: d.pScore,
+  pDiff: calcPDiff(d.pScore,d.sF,d.sU)
 })
 const oddsfile = FileAttachment("./data/odds_data.json").json().then((D) => D.map(coerceGameData));
 ```
@@ -31,7 +32,20 @@ function parseWeek(w)
 	}
 }
 ```
+```js
+function calcPDiff(pScore, sF, sU) 
+{
+  if(pScore.sF)
+  {
+    const fDiff = pScore.sF - sF;
+    const uDiff = pScore.sU - sU;
+    return Math.sqrt(fDiff^2 + uDiff^2);
+  }else{
+    return undefined;
+  }
 
+}
+```
 ```js
 teamNames.unshift({label:"All",alts:["All"]});
 
@@ -39,13 +53,12 @@ const teamSelect = Inputs.select(teamNames, {
   format: (d) => d.label,
   valueof: (d) => d.alts,
   value: teamNames[0].alts,
-  label: "Favorite"
+  label: "Team:"
 })
 const teamValue = Generators.input(teamSelect);
 ```
 ```js
-const highlight = view(
-  Inputs.radio(
+const viewSelect = Inputs.radio(
     new Map([
       ["Favorite vs. Underdog", 0], 
       ["Predicted Score",1]
@@ -53,11 +66,15 @@ const highlight = view(
     {
       value: 0, 
     }
-  )
-);
+  );
+const viewValue = Generators.input(viewSelect);
+```
+```js
+
 ```
 
 ```js
+let diffColorScale;
 function oddsPlot(d, {width} = {}) {
   let data = {};
   if(teamValue[0] != "All")
@@ -70,6 +87,8 @@ function oddsPlot(d, {width} = {}) {
     data = d;
   }
 
+  diffColorScale = d3.scaleLinear(d3.extent(oddsfile, (d) => d.pDiff),[1,0])
+
   const marginTop = 20;
   const marginRight = 20;
   const marginBottom = 20;
@@ -77,7 +96,7 @@ function oddsPlot(d, {width} = {}) {
   const yearGroups = d3.group(data, (d) => d.year);
   const yearN = d3.max(data, (d) => d.year)-1952;
   const gameCount = longestString(yearGroups)[1].length;
-  const padding = 1;
+  const padding = 0;
   const blockWidth =
     (width - marginLeft - marginRight) / yearN -
     padding;
@@ -206,7 +225,7 @@ function buildDualSquare(d, width, height) {
   let winFill = "none";
   let beatSpreadFill = "none";
 
-  if(highlight==0)
+  if(viewValue==0)
   {
     if(d.sF > d.sU)
     {
@@ -222,7 +241,7 @@ function buildDualSquare(d, width, height) {
     }
     if(teamValue[0]=="All")
     {
-      blockColor = "#F25781";
+      blockColor = "#545C32";
     }else{
       if(teamValue.indexOf(d.fav) > -1)
       {
@@ -243,11 +262,8 @@ function buildDualSquare(d, width, height) {
     }
 
   }else{
-  	 if (d.pScore.sF) {
-	    const combinedScore = d.sF + d.sU;
-      const combinedPredictedScore = d.pScore.sF + d.pScore.sU;
-      const pDiff = Math.abs((combinedScore - combinedPredictedScore)/combinedScore);
-      blockColor = d3.interpolateOrRd(pDiff);
+  	 if (d.pDiff) {
+      blockColor = d3.interpolateOrRd(diffColorScale(d.pDiff));
 	  } else {
 	    blockColor = "#555";
 	  }
@@ -256,7 +272,7 @@ function buildDualSquare(d, width, height) {
   return `
     <rect x="0" y="0" height="${height}" width="${
     width
-  }" fill="${blockColor}" />    
+  }" fill="${blockColor}" stroke="black" stroke-width="1"/>    
     <rect x="${strokeWidth/2}" y="${strokeWidth/2}" height="${height-strokeWidth}" width="${
     width-strokeWidth
   }" stroke="${fullStroke}" fill="none" stroke-width="${strokeWidth}"/>