diff --git a/src/index.md b/src/index.md index 9dbf08e..9512d79 100644 --- a/src/index.md +++ b/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 ` + }" fill="${blockColor}" stroke="black" stroke-width="1"/>