diff --git a/src/index.md b/src/index.md index 662412d..ae8cf16 100644 --- a/src/index.md +++ b/src/index.md @@ -1,3 +1,7 @@ +```js +import("https://kit.fontawesome.com/e791529cc8.js"); +``` + ```js const parseTime = d3.timeParse("%b %d, %Y"); const formatYear = d3.utcFormat("%Y"); @@ -7,6 +11,7 @@ const coerceGameData = (d, i) => ({ year: parseInt(d.week.slice(0, 4)), spread: Number(d.spread), fav: d.fav.replace(/\s\(\d\)/, ""), + at: d.at, und: d.und.replace(/\s\(\d\)/, ""), sF: Number(d.sF), sU: Number(d.sU), @@ -20,7 +25,17 @@ const oddsfile = FileAttachment("./data/odds_data.json").json().then((D) => D.ma ```js const teamNames = FileAttachment("./data/teams.json").json().then((d) => d.sort((a,b)=>a.label.localeCompare(b.label))) ``` - +```js +const defaultBlockFill = "#EEE"; +const noOUFill = "#555"; +const winCircleFill = "rgba(255,255,255,0.75)"; +const coverCircleFill = "rgb(0,0,0,0.75)"; +const favFill = "#F25781"; +const undFill = "#0277D1"; +const neutFill = "#5C7553"; +const neutFillSecondary = "#8F8A40" +const playOffStroke = "rgba(255,255,255,0.5)"; +``` ```js function parseWeek(w) { @@ -52,7 +67,7 @@ teamNames.unshift({label:"All",alts:["All"]}); const teamSelect = Inputs.select(teamNames, { format: (d) => d.label, valueof: (d) => d.alts, - value: teamNames[0].alts, + value: teamNames[26].alts, label: "Team:" }) const teamValue = Generators.input(teamSelect); @@ -65,6 +80,14 @@ const viewSelect = Inputs.radio( ]), { value: 0, + format:(x)=>{ + if(x[1]==1) + { + return html`Predicted Score ` + }else{ + return "Favorite vs. Underdog" + } + } } ); const viewValue = Generators.input(viewSelect); @@ -220,55 +243,78 @@ function buildDualSquare(d, width, height) { const blockHeight = height; const strokeWidth = 2; - let blockColor = "#EEE"; + let blockColor = defaultBlockFill; let fullStroke = "none"; let winFill = "none"; let beatSpreadFill = "none"; + let isAll = (teamValue[0=="All"]); + if(viewValue==0) { - if(d.sF > d.sU) - { - winFill = "rgba(255,255,255,0.75)" - } - if(d.sF - d.sU > d.spread) - { - beatSpreadFill = "rgb(0,0,0,0.75)" - } - if(Math.abs(d.sF - d.sU) < d.spread && d.sF < d.sU) - { - beatSpreadFill = "rgb(0,0,0,0.75)" - } + + if(teamValue[0]=="All") { - blockColor = "#545C32"; + if(d.sF > d.sU && d.sF - d.sU == d.spread)//fav doesn't cover, wins + { + blockColor = neutFill; + } + if(d.sF > d.sU && d.sF - d.sU < d.spread)//fav doesn't cover, wins + { + blockColor = neutFill; + winFill = winCircleFill; + } + if(d.sF - d.sU > d.spread)//favorite covers, wins + { + blockColor = neutFill; + winFill = winCircleFill; + beatSpreadFill = coverCircleFill; + } + if(d.sF <= d.sU)//underdog covers, wins + { + blockColor = neutFillSecondary; + } }else{ + if(d.sF > d.sU)//underdog covers, loses + { + winFill = winCircleFill; + } + if(d.sF - d.sU > d.spread)//favorite covers, wins + { + beatSpreadFill = coverCircleFill; + } + if(Math.abs(d.sF - d.sU) < d.spread && d.sF < d.sU)//underdog covers, wins + { + beatSpreadFill = coverCircleFill; + } if(teamValue.indexOf(d.fav) > -1) { - blockColor = "#F25781"; + blockColor = favFill; } if(teamValue.indexOf(d.und) > -1) { - blockColor = "#0277D1"; + blockColor = undFill; if(d.sU > d.sF) { - winFill = "rgba(255,255,255,0.75)" + winFill = winCircleFill; } } - if(d.week == undefined) - { - fullStroke = "rgba(255,255,255,0.5)"; - } } }else{ if (d.pDiff) { blockColor = d3.interpolateOrRd(diffColorScale(d.pDiff)); } else { - blockColor = "#555"; + blockColor = noOUFill; } } + if(d.week == undefined) + { + fullStroke = playOffStroke; + } + return ` + + + + ${isAll ? "push" : ""} + win + cover + playoffs + + + Favorite + ${isAll ? `${legendSwatch(neutFill)}` : `${legendSwatch(favFill)}`} + ${isAll ? `${legendSwatch(neutFill,false,true)}` : `${legendSwatch(favFill,false,true)}`} + ${isAll ? `${legendSwatch(neutFill,true,true)}` : `${legendSwatch(favFill,true, true)}`} + ${isAll ? `${legendSwatch(neutFill,false,false,true)}` : `${legendSwatch(favFill,false,false,true)}`} + + + Underdog + ${isAll ? `` : `${legendSwatch(undFill)}`} + ${isAll ? `${legendSwatch(neutFillSecondary)}` : `${legendSwatch(undFill,true,true)}`} + ${isAll ? `${legendSwatch(neutFillSecondary)}` : `${legendSwatch(undFill,true, true)}`} + ${isAll ? `${legendSwatch(neutFillSecondary,false,false,true)}` : `${legendSwatch(undFill,false,false,true)}`} + + + + ` + ) + }else{ + legendNode.html( + ` + + + + + + + + + + + + + + + + + + + + + + +
Worst predictionsBest predictions
+ ${legendSwatch(noOUFill)} No O/U data + + ${legendSwatch(d3.interpolateOrRd(1),false,false,true)} Playoffs +
+ ` + ) + } + + + + return legendNode.node(); +} + +function legendSwatch(bgFill,cover,win,playoffs) +{ + const blockSize = 15; + const strokeWidth = 2; + + return ` + + + + + + + ` + +} +```
-
${teamSelect}${viewSelect}
-
Legend
+
${teamSelect}
${viewSelect}
+
${legend()}
${resize((width) => oddsPlot(oddsfile, {width}))}
@@ -378,6 +518,24 @@ function buildToolTip(d) border: 2px white; } + #legend-table + { + margin-top: 0px; + } + + #legend-table td + { + width:50px; + } + + #legend-table td:nth-child(1) + { + width: 50px; + padding-right: 8px; + } + + + .lexend-400 { font-family: "Lexend", serif; font-optical-sizing: auto;