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
const parseTime = d3.timeParse("%b %d, %Y");
const coerceGameData = (d,i) => ({date: parseTime(d.date), spread: Number(d.spread)});
const oddsfile = FileAttachment("./data/odds_data_abbr.json").json().then((D) => D.map(coerceGameData));
const formatYear = d3.utcFormat("%Y");
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
Inputs.table(oddsfile);
display(oddsByYear);
```
```js
@ -18,15 +22,16 @@ function oddsPlot(data, {width} = {}) {
const marginLeft = 40;
// 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.
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()
.x(d => x(d.date))
.y(d => y(d.spread));
.x(d => x(d.year))
.y(d => y(d.count()))
// .y(d => y(total(d, "year", d.year)));
// Create the SVG container.
const svg = d3.create("svg")
@ -48,12 +53,6 @@ function oddsPlot(data, {width} = {}) {
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.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.
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="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
<div class="card">${resize((width) => oddsPlot(oddsByYear, {width}))}</div>
</div>