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

Tooltip

Browse Source
This commit is contained in:
BooshPC 2025-02-05 19:34:42 -05:00
parent 537226040d
commit 00d2c4bd13
2 changed files with 121 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
observablehq.config.js
View File

@ -17,7 +17,7 @@ export default {
// ], // ],
// Content to add to the head of the page, e.g. for a favicon: // Content to add to the head of the page, e.g. for a favicon:
head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">', head: '<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">',
// The path to the source root. // The path to the source root.
root: "src", root: "src",

146
src/index.md
View File

@ -109,7 +109,11 @@ function oddsPlot(d, {width} = {}) {
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("viewBox", [0, 0, width, height]) .attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; background-color: black;"); .attr("style", "max-width: 100%; height: auto; background-color: black;")
.on("mousemove", function(event, d)
{
//hideToolTip();
});
@ -144,10 +148,16 @@ function oddsPlot(d, {width} = {}) {
) )
.html((d) => buildDualSquare(d, blockWidth, blockHeight)) .html((d) => buildDualSquare(d, blockWidth, blockHeight))
.on("mouseover", function(event, d){ .on("mouseover", function(event, d){
infoTextContainer.html("<b>game!</b>") event.stopPropagation();
const destX = x(d.year)-blockWidth/2; const blockPos = d3.select(event.target.parentNode).attr("transform");
const destY = y(d); infoTextContainer.html(buildToolTip(d))
showTooltip(destX, destY); if(event.clientX+400>window.innerWidth)
{
infoTextContainer.attr("transform","translate(-400,0)");
}else{
infoTextContainer.attr("transform","translate(0,0)");
}
showTooltip(blockPos);
}) })
.on("mouseout", function(event, d){ .on("mouseout", function(event, d){
hideToolTip(); hideToolTip();
@ -156,28 +166,23 @@ function oddsPlot(d, {width} = {}) {
const infoBox = svg.append("g") const infoBox = svg.append("g")
.attr("class", "info-box") .attr("class", "info-box")
.attr("x", 5) .attr("transform", `translate(-1000,1000)`)
.attr("y", 5) .attr("opacity",1)
.attr("transform", `translate(-1000,-1000)`) .attr("width", 420)
const infoRect = infoBox.append("rect");
const infoTextContainer = infoBox.append("g") const infoTextContainer = infoBox.append("g")
.attr("fill", "white") .attr("fill", "white")
.attr("dy", 20) .attr("width", 420)
.attr("width", 120)
function showTooltip(x,y) function showTooltip(transform)
{ {
infoBox.attr("transform", `translate(${x}, ${y})`); infoBox.attr("transform", `${transform}`)
infoBox.transition().delay(100).duration(500).ease(d3.easeBackOut).attr("opacity",1) infoBox.attr("opacity", 1);
} }
function hideToolTip() function hideToolTip()
{ {
infoBox.transition().duration(500).ease(d3.easeBackOut).attr("opacity",0) infoBox.attr("opacity",0)
.transition().delay(500).attr("transform", "translate(-1000,-1000)")
} }
@ -262,22 +267,111 @@ function buildDualSquare(d, width, height) {
``` ```
```js ```js
function buildToolTip() function buildToolTip(d)
{ {
const weekString = d.week ? `Week ${d.week}` : "Playoffs";
const awayTeam = d.at ? d.und : `${d.fav} (-${d.spread})`;
const homeTeam = d.at ? `${d.fav} (-${d.spread})` : d.und;
const ou_text = d.ou ? `<div class="tip-item tip-text-full">OU ${d.ou}</div>` : ""
const toolTipHTML = `
<foreignObject width="400" height="200" x="15" y="15">
<div xmlns="http://www.w3.org/1999/xhtml" id="tool-tip-container" class="lexend-400">
<div class="tip-item-full">${formatDate(d.date)} (${weekString})</div>
<div class="tip-item tip-text-left">${d.sF}</div><div class="tip-item-small">&nbsp;-&nbsp;</div><div class="tip-item tip-text-right">${d.sU}</div>
<div class="tip-item tip-text-left">${awayTeam}</div><div class="tip-item-small">&nbsp;@&nbsp;</div><div class="tip-item tip-text-right">${homeTeam}</div>
${ou_text}
</div>
</foreignObject>
`
return toolTipHTML;
} }
``` ```
<div class="grid grid-cols-2">
<div class="card">${teamSelect}${viewSelect}</div>
<div class="card">Legend</div>
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
</div>
<style> <style>
.gameBlock .gameBlock
{ {
cursor: pointer; cursor: pointer;
} }
</style>
<div class="grid grid-cols-2"> .info-box
<div class="card">${teamSelect}</div> {
</div> pointer-events: none;
<div class="grid grid-cols-1"> }
<div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
</div> #tool-tip-container
{
color: white;
background-color: black;
border: 3px solid white;
padding: 15px;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
row-gap: 10px;
}
#tool-tip-container .tip-item
{
flex-basis: 140px;
}
#tool-tip-container .tip-item-small
{
flex-basis: 25px;
text-align: center;
padding: 0px 3px;
}
#tool-tip-container .tip-item-full
{
flex-basis:100%;
}
#tool-tip-container .tip-text-left, #tool-tip-container .tip-text-right
{
text-wrap: nowrap;
}
#tool-tip-container .tip-text-left
{
text-align: right;
}
#tool-tip-container .tip-text-right
{
text-align: left;
}
.score
{
padding: 10px;
border: 2px white;
}
.lexend-400 {
font-family: "Lexend", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.lexend-200 {
font-family: "Lexend", serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
}
</style>