search

LoveofSportsLLC / NFL

NFL + AI
https://loveoffootball.io/
MIT License
0 stars 0 forks source link

Player Performance Heatmap #82

Open zepor opened 1 month ago

zepor commented 1 month ago
  1. Player Performance Heatmap • Why: This visualization shows how individual players perform across various metrics (e.g., passing accuracy, rushing yards, defensive stops). Heatmaps allow users to quickly identify strengths and weaknesses in a player's performance, making it easy to compare different players. Title/Concept Name: Player Performance Heatmap

User Story: As a user (e.g., coach, analyst, fan), I want to visualize player performance across various metrics so that I can quickly identify strengths and weaknesses of individual players and compare them with others.

Description: Create a player performance heatmap using React and D3.js that visualizes individual player performance across multiple metrics. Tasks: • Design and implement the heatmap interface. ○ Example: Refer to Player Performance Heatmap Example • Integrate data for real-time updates using Sports Radar API. • Implement advanced features (hover effects, click to expand, dynamic filtering). • Ensure interactivity with filters and comparative analysis options.

Acceptance Criteria: • The heatmap must display individual player performance for multiple parameters such as passing accuracy, rushing yards, defensive stops, etc. • Each cell in the heatmap should be color-coded based on performance, with a gradient indicating low to high values. • Tooltips should appear on hover, detailing the specific metric and value for the player. • The heatmap must be responsive and render correctly on different screen sizes. • Data should be fetched in real-time using the Sports Radar API, and the visualization should be updated accordingly. • The heatmap should include filters (e.g., by player, team, game phase) for more tailored analysis.

User Flow:

  1. Data Initialization: ○ User lands on the Player Performance page. ○ The frontend sends a request to the backend to fetch player data.
  2. Rendering Heatmap: ○ The heatmap component initializes and inserts an SVG into the DOM. ○ Data fetched from the backend API is processed and bound to the heatmap using D3.js.
  3. Interaction: ○ Users see a well-labeled heatmap with players on one axis and performance metrics on the other. ○ Hovering over a cell displays a tooltip with detailed performance data.
  4. Filtering and Updates: ○ Users can apply filters to refine which players and metrics are displayed. ○ The heatmap updates dynamically based on the selected filters and new data from the backend.

Axes and Labels: X-Axis (Metrics): • Passing Accuracy • Rushing Yards • Defensive Stops • Receiving Yards • Touchdowns • Sacks • Interceptions • Field Goals Made • Punt Return Yards • Kick Return Yards Y-Axis (Players): • Each player’s full name. • Include small profile photos for better visual recognition. Data Points Required: • Player Identification: ○ Full name, ID, team name, team logo, player image. • Performance Metrics: ○ Detailed offensive, defensive, and special teams metrics, including: § Passing Yards § Passing Attempts § Passing Completions § Rushing Attempts § Rushing Yards § Receptions § Receiving Yards § Sacks § Tackles § Interceptions § Field Goals Attempted § Field Goals Made § Extra Points Attempted § Extra Points Made • Game Context: ○ Game date, opponent team, game phase, home/away, weather conditions. • Historical Data: ○ Aggregate metrics for previous seasons, injury history, consistency index.

Example Code Snippets: Hover Effects with Detailed Tooltips:


import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const PlayerPerformanceHeatmap = ({ data, metrics, players }) => {
  const heatmapRef = useRef();
  useEffect(() => {
    const svg = d3.select(heatmapRef.current);
    const width = 960;
    const height = 500;
    const margin = { top: 50, right: 25, bottom: 50, left: 100 };
    svg.attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);
    const x = d3.scaleBand().range([0, width]).domain(metrics).padding(0.01);
    const y = d3.scaleBand().range([0, height]).domain(players.map(p => p.name)).padding(0.01);
    const colorScale = d3.scaleSequential(d3.interpolateYlGnBu).domain([0, 100]);
    svg.append('g').call(d3.axisBottom(x)).attr('transform', `translate(0,${height})`);
    svg.append('g').call(d3.axisLeft(y));
    players.forEach(player => {
      svg.append('image')
        .attr('href', player.image)
        .attr('x', -50)
        .attr('y', y(player.name) + y.bandwidth() / 4)
        .attr('width', 30)
        .attr('height', 30)
        .attr('class', 'player-photo');
    });
    svg.selectAll()
      .data(data)
      .enter()
      .append('rect')
      .attr('x', d => x(d.metric))
      .attr('y', d => y(d.player))
      .attr('width', x.bandwidth())
      .attr('height', y.bandwidth())
      .style('fill', d => colorScale(d.value))
      .on('mouseover', function(event, d) {
        const [x, y] = d3.pointer(event);
        d3.select(this).style('opacity', 0.8);
        tooltip.style('opacity', 1).html(`<strong>${d.player}</strong><br/>${d.metric}: ${d.value}`)
        .style('left', `${x + 10}px`)
        .style('top', `${y + 10}px`);
      })
      .on('mouseleave', function() {
        d3.select(this).style('opacity', 1);
        tooltip.style('opacity', 0);
      });
    const tooltip = d3.select('body').append('div')
      .style('position', 'absolute')
      .style('background', 'rgba(0, 0, 0, 0.7)')
      .style('color', '#fff')
      .style('padding', '5px')
      .style('border-radius', '3px')
      .style('opacity', 0);
  }, [data, metrics, players]);
  return <svg ref={heatmapRef}></svg>;
};
export default PlayerPerformanceHeatmap;
Data Retrieval via Sports Radar API:

const fetchPlayerData = async (playerId) => {
  const response = await fetch(`https://api.sportradar.us/nfl/official/trial/v7/en/players/${playerId}/profile.json?api_key=YOUR_API_KEY`);
  const data = await response.json();
  return data;
}

Related GitHub Issues/Pull Reques

ts:

GitHub Issue Template for Player Performance Heatmap

Implement Player Performance Heatmap

Description: Create a player performance heatmap using React and D3.js that visualizes individual player performance across multiple metrics. This visualization will compare player performance with three benchmarks: historical performances, other teams' performance against opponents in the same position, and matchups specifically against the current opponent's defense. Tasks:

Enhancements to Improve:

  1. Interactivity: ○ Implement dynamic filters to view specific metrics, game phases, matchup data, and historical comparisons. ○ Allow hovering over cells/players to view detailed performance metrics and comparisons.
  2. Visualization: ○ Use a clean and consistent color palette for better differentiation. ○ Include player photos for better recognition and context. ○ Display comparative performance against historical records, other teams in the same position, and the current opponent's defense.
  3. Responsiveness: ○ Ensure the heatmap resizes correctly for mobile and tablet views. ○ Provide options to minimize/expand the heatmap for better dashboard management.
codeautopilot[bot] commented 1 month ago

Your organization has reached the subscribed usage limit. You can upgrade your account by purchasing a subscription at Stripe payment link