Como criar graficos radar de jogadores

How to build SVG radar charts from player statistics

Neste tutorial criaremos graficos radar em SVG puro para comparar jogadores visualmente. Sem bibliotecas externas.

In this tutorial we'll build pure SVG radar charts to visually compare players. No external libraries.

1. Buscar estatisticas dos jogadores / Get player statistics

Precisamos de estatisticas de cada jogador usando o endpoint /players:

const API_KEY = 'YOUR_API_KEY';
const BASE = 'https://football.api.insyde.one';

async function getPlayer(id, season) {
  const res = await fetch(`${BASE}/players?id=${id}&season=${season}&key=${API_KEY}`);
  const data = await res.json();
  return data.response[0];
}

// Memphis Depay, Pedro, Estevao
const players = await Promise.all([
  getPlayer(1100, 2025),
  getPlayer(47381, 2025),
  getPlayer(410116, 2025)
]);

2. Normalizar dados para o radar / Normalize data for the radar

Os eixos do radar precisam de valores entre 0 e 1. Normalizamos dividindo pelo valor maximo possivel ou pelo maximo do dataset.

const AXES = ['Goals', 'Assists', 'Key Passes', 'Dribbles', 'Tackles', 'Rating'];

function normalize(player) {
  const s = player.statistics[0];
  return {
    name: player.player.name,
    values: [
      s.goals.total / 25,       // max ~25 goals
      s.goals.assists / 15,     // max ~15 assists
      s.passes.key / 60,         // max ~60 key passes
      s.dribbles.success / 80,   // max ~80 dribbles
      s.tackles.total / 60,      // max ~60 tackles
      (s.games.rating - 6) / 2  // rating 6-8 mapped to 0-1
    ]
  };
}

3. Desenhar o radar SVG / Draw the SVG radar

function drawRadar(players, svgEl) {
  const cx = 200, cy = 200, r = 150;
  const n = AXES.length;
  let svg = '';

  // Grid rings at 20%, 40%, 60%, 80%, 100%
  [0.2, 0.4, 0.6, 0.8, 1.0].forEach(s => {
    const pts = [];
    for (let i = 0; i < n; i++) {
      const a = (Math.PI * 2 * i / n) - Math.PI / 2;
      pts.push(`${cx + Math.cos(a) * r * s},${cy + Math.sin(a) * r * s}`);
    }
    svg += `<polygon points="${pts.join(' ')}" fill="none" stroke="#2a2a2a"/>`;
  });

  // Player polygons
  players.forEach(p => {
    const pts = p.values.map((v, i) => {
      const a = (Math.PI * 2 * i / n) - Math.PI / 2;
      return `${cx + Math.cos(a) * r * v},${cy + Math.sin(a) * r * v}`;
    }).join(' ');
    svg += `<polygon points="${pts}" fill="${p.color}22" stroke="${p.color}" stroke-width="2"/>`;
  });

  svgEl.innerHTML = svg;
}

4. Resumo / Summary

1. Buscar estatisticas de cada jogador via /players?id=X&season=Y
2. Normalizar os valores para uma escala 0-1
3. Calcular as coordenadas polares para cada eixo
4. Renderizar poligonos SVG com cores diferentes por jogador

Back to Football API docs