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:
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.
root: "src",

146
src/index.md
View File

@ -109,7 +109,11 @@ function oddsPlot(d, {width} = {}) {
.attr("width", width)
.attr("height", 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))
.on("mouseover", function(event, d){
infoTextContainer.html("<b>game!</b>")
const destX = x(d.year)-blockWidth/2;
const destY = y(d);
showTooltip(destX, destY);
event.stopPropagation();
const blockPos = d3.select(event.target.parentNode).attr("transform");
infoTextContainer.html(buildToolTip(d))
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){
hideToolTip();
@ -156,28 +166,23 @@ function oddsPlot(d, {width} = {}) {
const infoBox = svg.append("g")
.attr("class", "info-box")
.attr("x", 5)
.attr("y", 5)
.attr("transform", `translate(-1000,-1000)`)
const infoRect = infoBox.append("rect");
.attr("transform", `translate(-1000,1000)`)
.attr("opacity",1)
.attr("width", 420)
const infoTextContainer = infoBox.append("g")
.attr("fill", "white")
.attr("dy", 20)
.attr("width", 120)
.attr("width", 420)
function showTooltip(x,y)
function showTooltip(transform)
{
infoBox.attr("transform", `translate(${x}, ${y})`);
infoBox.transition().delay(100).duration(500).ease(d3.easeBackOut).attr("opacity",1)
infoBox.attr("transform", `${transform}`)
infoBox.attr("opacity", 1);
}
function hideToolTip()
{
infoBox.transition().duration(500).ease(d3.easeBackOut).attr("opacity",0)
.transition().delay(500).attr("transform", "translate(-1000,-1000)")
infoBox.attr("opacity",0)
}
@ -262,22 +267,111 @@ function buildDualSquare(d, width, height) {
```
```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>
.gameBlock
{
cursor: pointer;
}
</style>
<div class="grid grid-cols-2">
<div class="card">${teamSelect}</div>
</div>
<div class="grid grid-cols-1">
<div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
</div>
.info-box
{
pointer-events: none;
}
#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>