Skip to content

Commit

Permalink
updated plot 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@khalilacheche
khalilacheche committed May 29, 2024
1 parent 7f55700 commit c0bc7a6
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 50 deletions.
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ <h2 class="mb-5">Viz 1</h2>
<section class="resume-section" id="viz2">
<div class="resume-section-content">
<h2 class="mb-5">Viz 2</h2>
<iframe src="plots/player_performance/plot.html" style="width: 1030px; height: 1250px;"></iframe>
<iframe src="plots/player_performance/plot.html" style="width: 1000px; height: 600px;"></iframe>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
Expand Down
19 changes: 9 additions & 10 deletions docs/plots/player_performance/plot.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,26 @@

<body>
<div id="rs-v-po-container">
<h5>Select two different metrics</h5>
<div id="perfcontainer">
<select id="perf-metric1-select" style="width: 300px; float: left"></select>
<select id="perf-metric2-select" style="width: 300px; float: left; margin-left: 50px"></select>
<select id="category" style="width: 100px; float: left; margin-left: 250px"></select>
<select id="category" style="width: 100px; float: left; margin-left: 200px"></select>
</div>
<br />

<div id="fullPlot">
<div class="plot-column" id="legend-container"></div>
<div class="plot-column" id="scatterPlot"></div>
<div class="player-card" id="playerCard">
<div class="player-card" style="margin-top: 50px;" id="playerCard">
<img id="playerImage" src="" alt="Player Image" style="width:100%; height:auto;">
<h3 id="playerName">Player Name</h3>
<p><strong>Position:</strong> <span id="playerPosition">N/A</span></p>
<p><strong>Position category:</strong> <span id="playerPositionGroup">N/A</span></p>
<p><strong>Team:</strong> <span id="playerTeam">N/A</span></p>
<p><strong id="metric-1-column"></strong> <span id="metric-1-value">N/A</span></p>
<p><strong id="metric-2-column"></strong> <span id="metric-2-value">N/A</span></p>
<p class="no-margin"><strong>Position:</strong> <span id="playerPosition">N/A</span></p>
<p class="no-margin"><strong>Position category:</strong> <span id="playerPositionGroup">N/A</span></p>
<p class="no-margin"><strong>Team:</strong> <span id="playerTeam">N/A</span></p>
<p class="no-margin"> <strong id="metric-1-column"></strong> <span id="metric-1-value">N/A</span></p>
<p class="no-margin"><strong id="metric-2-column"></strong> <span id="metric-2-value">N/A</span></p>
<!-- Add more statistics as needed -->
</div>
<div class="plot-column" id="scatterPlot"></div>
<div class="plot-column" id="legend-container"></div>
</div>
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
Expand Down
50 changes: 23 additions & 27 deletions docs/plots/player_performance/plot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,16 @@ let colorScale;
let dropdownsActive = false;

// dimensions
const margin = { top: 60, right: 60, bottom: 60, left: 60 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const margin = { top: 5, right: 5, bottom: 30, left: 60 };
const width = 500;
const height = 500;

this.svg = d3
.select("#scatterPlot")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
.attr("height", height + margin.top + margin.bottom);
//.attr("transform", `translate(${margin.left}, ${margin.top})`);

//Get the svg dimensions
const playerCard = {
Expand All @@ -32,7 +31,7 @@ const playerCard = {
metric_1_value: document.getElementById("metric-1-value"),
metric_2_column: document.getElementById("metric-2-column"),
metric_2_value: document.getElementById("metric-2-value"),
};
};

let teamToID = {}; // dictionary converting team nickname to team_id
const metricsDict = {
Expand Down Expand Up @@ -60,9 +59,8 @@ function roundToTwoDecimals(number) {
return (Math.round(number * 100) / 100).toFixed(2);
}
function updatePlayerCard(d) {
console.log(d);


const player = d; // Assuming data contains consistent records for each player/season

playerCard.name.textContent = player.PLAYER_NAME;
Expand All @@ -73,18 +71,18 @@ function updatePlayerCard(d) {
playerCard.metric_1_column.textContent = metric_1_Select.property("value") + ":";
const metric_1_value = roundToTwoDecimals(d[metricsDict[metric_1_Select.property("value")]]);
playerCard.metric_1_value.textContent = metric_1_value;
if(metric_1_Select.property("value") == metric_2_Select.property("value") ){
if (metric_1_Select.property("value") == metric_2_Select.property("value")) {
playerCard.metric_2_column.textContent = "";
playerCard.metric_2_value.textContent = "";
}else {
} else {
playerCard.metric_2_column.textContent = metric_2_Select.property("value") + ":";
const metric_2_value = roundToTwoDecimals(d[metricsDict[metric_2_Select.property("value")]]);
playerCard.metric_2_value.textContent = metric_2_value;

}
playerCard.image.src = `https://ak-static.cms.nba.com/wp-content/uploads/headshots/nba/latest/260x190/${player.PLAYER_ID}.png`;
}

}
function mouseOver(event, d) {
const prevR = d3.select(this).attr("r");
const prevColour = d3.select(this).style("fill");
Expand All @@ -96,7 +94,7 @@ function mouseOver(event, d) {
.attr("r", 6) // Enlarge the circle slightly
.attr("original-colour", prevColour)
.style("fill", "orange");

updatePlayerCard(d);

}
Expand Down Expand Up @@ -276,7 +274,7 @@ function handlePosition(changeScale) {
playerData.forEach((element) => {
if (element["POSITION"]) positions.add(element["POSITION"]);
});
console.log("positions"+positions);
console.log("positions" + positions);
if (changeScale) colorScale = generateColorScale(Array.from(positions));
circles.attr("fill", function (d) {
return colorScale(d["POSITION"]);
Expand Down Expand Up @@ -320,8 +318,8 @@ function createScatter(metric1, metric2) {
const yExtent = d3.extent(playerData, (d) => +d[metric2]);
xScale = d3
.scaleLinear()
.domain([0, xExtent[1]])
.range([margin.left, width - margin.right]);
.domain([0, xExtent[1]])
.range([margin.left, width + margin.left + margin.right]);

yScale = d3
.scaleLinear()
Expand All @@ -343,7 +341,6 @@ function createScatter(metric1, metric2) {
.attr("fill", "steelblue")
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
console.log(circles);
svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${height - margin.bottom})`)
Expand All @@ -356,12 +353,12 @@ function createScatter(metric1, metric2) {

svg.append("text")
.attr("class", "axis-title")
.attr("x", width / 2)
.attr("y", height - 6)
.attr("x", (width + margin.left + margin.right) / 2)
.attr("y", height)
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("font-weight", "bold")
.text(metric1);
.text(metric_1_Select.property("value"));

svg.append("text")
.attr("class", "axis-title")
Expand All @@ -371,7 +368,7 @@ function createScatter(metric1, metric2) {
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("font-weight", "bold")
.text(metric2);
.text(metric_2_Select.property("value"));

mouseInteractions();
}
Expand Down Expand Up @@ -424,7 +421,7 @@ function handleSelect(metChange, catChange) {
}
} else {
const category = catSelect.property("value");
console.log("category"+category);
console.log("category" + category);
dropdownsActive = false;
if (
selectedMetric1 != "--Metric 1--" &&
Expand Down Expand Up @@ -454,19 +451,18 @@ Promise.all([
playerData = values[0];

metric_1_Select = createMetric1DD();
console.log("metric_1_Select"+metric_1_Select);
console.log("metric_1_Select" + metric_1_Select);
metric_2_Select = createMetric2DD();
console.log("metric_2_Select"+metric_2_Select);
console.log("metric_2_Select" + metric_2_Select);
catSelect = createCategoryDD();
console.log("catSelect "+catSelect);
console.log("catSelect " + catSelect);
metric_1_Select.on("change", function () {
handleSelect(true, false);
});
metric_2_Select.on("change", function () {
handleSelect(true, false);
});
catSelect.on("change", function () {
console.log("okok");
handleSelect(false, true);
});
});
Expand Down
24 changes: 12 additions & 12 deletions docs/plots/player_performance/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,21 +289,16 @@ th {


#scatterPlot {
width: 800px;
height: 600px;
/* border: 0px solid #ccc; */
margin-right: 50px;
margin-left: 25px;
position: relative;
}

#legend-container {
margin-left: 50px;
margin-right: 50px;
margin-top: 50px;
max-height: 500px;
margin-right: 10px;
max-height: 450px;
overflow-y: auto;
width: 200px; /* Ensure a fixed width to prevent content overflow */
width: 200px;
/* Ensure a fixed width to prevent content overflow */
}

.plot-column {
Expand Down Expand Up @@ -337,7 +332,12 @@ th {
border: 1px solid #ddd;
border-radius: 5px;
width: 300px;
}
.player-card h3 {
}

.player-card h3 {
margin-top: 0;
}
}

.no-margin {
margin: 0;
}

0 comments on commit c0bc7a6

Please sign in to comment.