Sports Analytics con Python: Comparando los partidos con mayor y menor actividad ofensiva del Mundial FIFA 2026

Imagen
¿Qué hace realmente emocionante a un partido de fútbol? Cuando hablamos de un gran partido solemos pensar inmediatamente en muchos goles. Sin embargo, en Sports Analytics la producción ofensiva puede analizarse desde una perspectiva mucho más amplia utilizando estadísticas avanzadas. En este proyecto desarrollé un Match Excitement Score (MES) , un índice que resume la actividad ofensiva de cada encuentro del Mundial FIFA 2026 mediante una combinación de métricas tradicionales y avanzadas. Todo el análisis fue realizado en Python utilizando Pandas y Matplotlib, compartiendo además el notebook completo para que cualquier persona pueda reproducir los resultados. ¿Cómo se construyó el Match Excitement Score? El índice integra seis variables ofensivas disponibles en el dataset: ⚽ Goles 📈 Expected Goals (xG) 🎯 Total de disparos 🥅 Disparos a puerta 🔥 Big Chances 📍 Toques dentro del área rival Cada variable fue estandarizada mediante Z-score y posteriormente ...
Publicar un comentario

Graficar Funciones con JavaScript y HTML Chart.js

 Cuando trabajamos con datos o funciones matemáticas, es muy útil poder visualizarlos en una gráfica. Con JavaScript y HTML, esto es sencillo si utilizamos una biblioteca como Chart.js.

A continuación, te presento un ejemplo donde graficamos la función cuadrática y = x^3. Usaremos etiquetas en el eje X desde -10 hasta 10 y graficar los valores correspondientes para y.

Guia para graficar funciones con javascript


Aquí tienes el código que necesitas para generar la gráfica:



<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Graficar Funciones con JavaScript</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

    <h1>Graficar Funciones con JavaScript y HTML</h1>

    <canvas id="miGrafica" width="400" height="200"></canvas>


    <script>

        // Generar datos para la función y = x^3

        const etiquetas = [];

        const datosFuncion = [];


        for (let x = -10; x <= 10; x++) {

            etiquetas.push(x);

            datosFuncion.push(x * x);  // y = x^2

        }


        const ctx = document.getElementById('miGrafica').getContext('2d');

        const miGrafica = new Chart(ctx, {

            type: 'line',  // Tipo de gráfica

            data: {

                labels: etiquetas,

                datasets: [{

                    label: 'y = x^3',

                    data: datosFuncion,

                    borderColor: 'rgba(75, 192, 192, 1)',

                    borderWidth: 2,

                    fill: false

                }]

            },

            options: {

                scales: {

                    x: { title: { display: true, text: 'Valor de x' } },

                    y: { title: { display: true, text: 'Valor de y' } }

                }

            }

        });

    </script>

</body>

</html>

 Este código utiliza un elemento <canvas> donde se dibuja la gráfica. Luego, mediante un script de JavaScript, generamos los datos para la función y = x^3 y los pasamos a Chart.js para que los graficaque. 

Visita la url https://www.programacionparatodos.com/p/graficar-funciones-con-javascript-y.html Para ver el resultado


Conclusión

Este ejemplo es una introducción básica, pero Chart.js tiene una gran variedad de opciones para crear gráficos más complejos, incluyendo gráficos de barras, líneas, radar, y más. Puedes personalizar tu gráfica para que se ajuste a tus necesidades.

Comentarios

Publicar un comentario

Dejanos tus dudas y comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!