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

Working through the data parsing and visualization

Browse Source
This commit is contained in:
Gabi 2025-01-28 16:29:51 -05:00
parent 39035a8673
commit 9050cbc4a4
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/index.md
View File

@ -1,11 +1,15 @@
```js ```js
const parseTime = d3.timeParse("%b %d, %Y"); const parseTime = d3.timeParse("%b %d, %Y");
const coerceGameData = (d,i) => ({date: parseTime(d.date), spread: Number(d.spread)}); const formatYear = d3.utcFormat("%Y");
const oddsfile = FileAttachment("./data/odds_data_abbr.json").json().then((D) => D.map(coerceGameData)); const coerceGameData = (d,i) => ({date: parseTime(d.date), year: parseInt(formatYear(parseTime(d.date))), spread: Number(d.spread)});
const oddsfile = FileAttachment("./data/odds_data.json").json().then((D) => D.map(coerceGameData));
```
```js
const oddsByYear = d3.group(oddsfile, d => d.year)
``` ```
```js ```js
Inputs.table(oddsfile); display(oddsByYear);
``` ```
```js ```js
@ -18,15 +22,16 @@ function oddsPlot(data, {width} = {}) {
const marginLeft = 40; const marginLeft = 40;
// Declare the x (horizontal position) scale. // Declare the x (horizontal position) scale.
const x = d3.scaleUtc(d3.extent(data, d => d.date), [marginLeft, width - marginRight]); const x = d3.scaleTime([1952,2025], [marginLeft, width-marginRight]);
// Declare the y (vertical position) scale. // Declare the y (vertical position) scale.
const y = d3.scaleLinear([0, d3.max(data, d => d.spread)], [height - marginBottom, marginTop]); const y = d3.scaleLinear([0, 600], [height - marginBottom, marginTop]);
// Declare the line generator. // Declare the line generator.
const line = d3.line() const line = d3.line()
.x(d => x(d.date)) .x(d => x(d.year))
.y(d => y(d.spread)); .y(d => y(d.count()))
// .y(d => y(total(d, "year", d.year)));
// Create the SVG container. // Create the SVG container.
const svg = d3.create("svg") const svg = d3.create("svg")
@ -48,12 +53,6 @@ function oddsPlot(data, {width} = {}) {
.call(g => g.selectAll(".tick line").clone() .call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight) .attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1)) .attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Daily close ($)"));
// Append a path for the line. // Append a path for the line.
svg.append("path") svg.append("path")
@ -66,6 +65,15 @@ function oddsPlot(data, {width} = {}) {
} }
``` ```
```js
function total(data, label, find)
{
return data.reduce(function(count, entry) {
return count + (entry[label] === find ? 1 : 0);
}, 0);
}
```
<div class="grid grid-cols-1"> <div class="grid grid-cols-1">
<div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div> <div class="card">${resize((width) => oddsPlot(oddsByYear, {width}))}</div>
</div> </div>