commit grafico radar

script.js

@@ -77,8 +77,86 @@ function rendimientoJugadores() {
 
     // Crear div a la derecha (resto del espacio)
     restoPantalla
-        .append("div")
-        .attr("id", "lado-derecho");
+    .append("div")
+    .attr("id", "lado-derecho")
+    .style("flex", "1")
+    .style("background-color", "#F5F5F5") // Fondo gris claro
+    .style("display", "flex")
+    .style("align-items", "center")
+    .style("justify-content", "center")
+    .style("position", "relative"); // Permite po
+    crearGraficoRadar("#lado-derecho");
+}
+
+// Función para crear el gráfico de radar con líneas intermedias y exteriores
+function crearGraficoRadar(containerSelector) {
+    const container = d3.select(containerSelector);
+
+    // Configuración del SVG
+    const width = 600; // Tamaño del gráfico
+    const height = 600;
+
+    // Configuración del radar
+    const metrics = 8; // Número de vértices
+    const levels = 5; // Número de niveles (anillos intermedios)
+    const radius = Math.min(width, height) / 2; // Radio del radar exterior
+    const angleSlice = (2 * Math.PI) / metrics;
+
+    // Escala para los niveles (líneas intermedias)
+    const rScale = d3.scaleLinear().range([0, radius]).domain([0, 100]);
+
+    // Crear el SVG dentro del contenedor
+    const svg = container
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .append("g")
+        .attr("transform", `translate(${width / 2}, ${height / 2})`);
+
+    // Dibujar líneas intermedias y exteriores
+    for (let level = 1; level <= levels; level++) {
+        const levelRadius = (level / levels) * radius;
+
+        const vertices = [];
+        for (let i = 0; i < metrics; i++) {
+            vertices.push([
+                levelRadius * Math.cos(angleSlice * i - Math.PI / 2),
+                levelRadius * Math.sin(angleSlice * i - Math.PI / 2),
+            ]);
+        }
+
+        // Dibujar las líneas entre los vértices de cada nivel (incluyendo la exterior)
+        for (let i = 0; i < vertices.length; i++) {
+            const [x1, y1] = vertices[i];
+            const [x2, y2] = vertices[(i + 1) % vertices.length];
+            svg.append("line")
+                .attr("x1", x1)
+                .attr("y1", y1)
+                .attr("x2", x2)
+                .attr("y2", y2)
+                .style("stroke", level === levels ? "black" : "#999") // Exterior en azul, intermedias en gris
+                .style("stroke-width", level === levels ? 2 : 1); // Exterior más gruesa
+        }
+    }
+
+    // Dibujar líneas radiales desde el centro hasta los vértices
+    const exteriorVertices = [];
+    for (let i = 0; i < metrics; i++) {
+        exteriorVertices.push([
+            radius * Math.cos(angleSlice * i - Math.PI / 2),
+            radius * Math.sin(angleSlice * i - Math.PI / 2),
+        ]);
+    }
+
+    exteriorVertices.forEach(([x, y]) => {
+        svg.append("line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", x)
+            .attr("y2", y)
+            .style("stroke", "#444") // Líneas radiales en gris oscuro
+            .style("stroke-width", 1.5); // Grosor de las líneas radiales
+    });
 }
 
 // Función para cargar datos del CSV desde una URL