gabi/NFLOddsVis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visuals & score differentiation calculation

Browse Source
This commit is contained in:
BooshPC 2025-02-05 19:34:58 -05:00
parent 00d2c4bd13
commit 6605c303c8
1 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/index.md
View File

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