Ejercicio: Escritura de código de JavaScript para inicializar la aplicación web con datos del modelo de Machine Learning
En las unidades anteriores, creamos un archivo CSV denominado game_stats.csv que contiene una fila de estadísticas para cada uno de los 16 jugadores en cuatro períodos de un partido. Ahora vamos a leer el valor de PER de cada jugador para cada cuarto del partido. Luego, podemos usar esa información para decidir qué jugadores podrían necesitar un descanso para beber agua.
Nota:
El repositorio de GitHub que ha clonado contiene un archivo de ejemplo game_stats.csv. Si quiere reemplazar ese archivo de ejemplo por el que ha creado, cópielo y péguelo en la carpeta del repositorio space-jam-a-new-legacy-app y reemplace el que está ahí.
Lectura de los datos de game_stats en una variable de JavaScript
Abra el archivo main.js en Visual Studio Code. Debería ver las variables globales que usaremos en la aplicación. Justo después de estas variables aparece una declaración de función:
// A map of playerName to an array of playerPER values
var playerMap = new Map();
// Variables to keep track of constants
const maxPlayersOnCourt = 5;
const numQuarters = 4;
// Variables to track state throughout the game
var currentQuarter = 0;
var playersOnCourt = 0;
var quarterInPlay = false;
// Variables to track PER throughout the game
var quarterPER = 0;
var quarterAvePER = 0;
var totalAvePER = 0;
// Function to read in all the player stats
function processPlayers(allPlayerStats) {
Ahora empezaremos a escribir la función para leer los datos.
El primer comentario de código es Split the data by newline into an array. Los datos que se leen del archivo game_stats.csv se incluyen en una cadena de gran tamaño. Para analizar cada fila de datos, es necesario dividir primero cada fila. Cada fila está delimitada por un carácter de nueva línea. El uso de la función split(/\r\n|\n/) en el parámetro allPlayerStats da como resultado una matriz en la que cada elemento es una fila del archivo CSV. Asigne a esta matriz el nombre allPlayerStatLines.
También es necesario quitar la primera línea, ya que contiene información de encabezado que no se necesita. Vamos a llamar a shift para quitar la información.
// Split the data by newline into an array.
var allPlayerStatLines = allPlayerStats.split(/\r\n|\n/);
// Remove the header line (first line)
allPlayerStatLines.shift();
Ahora, tiene acceso a todos los datos de una matriz de JavaScript, sin necesidad de preocuparse por obtener acceso al archivo CSV.
Recopilación de los datos de nombre de jugador y valor de PER
Aunque tenemos acceso a todos los datos de la variable allPlayerStatLines, podemos hacer un poco trabajo inicial para que sea más fácil acceder solo a los datos que realmente necesitamos: el nombre de jugador y el valor de PER de cada uno de los cuatro cuartos del partido. Para obtener estos datos, crearemos una asignación de nombres de jugador a una lista de PER por cuarto del partido. Antes de crear la asignación, es necesario aislar los datos de cada jugador.
Al examinar el archivo CSV, podemos ver que, por ejemplo, Silvestre aparece en la línea 1 y otra vez en las líneas 18, 34 y 50. Esto se debe a que Silvestre tiene cuatro estadísticas que representan su estado en cada uno de los cuatro cuartos del partido. La primera entrada de cada jugador es para el inicio del partido, la siguiente para el inicio del primer cuarto, etc. Dado que están en orden, podemos suponer que la siguiente entrada de un jugador determinado es para el cuarto siguiente.
Lo que haremos es leer cada línea del archivo. Obtendremos el nombre del jugador y buscaremos la asignación para ver si existe el jugador. Si no es así y es la primera vez que vemos al jugador en los datos, lo agregaremos. Después, obtendremos el valor de PER. Como sabemos que las entradas están ordenadas por cuarto del partido, podemos agregar cada valor con la seguridad de que están en el orden correcto.
// Loop through the rows and create a map entry of player name to a list of player PER
for (var statLine of allPlayerStatLines) {
// Get all individual stat values
var stats = statLine.split(',');
// If it's just an empty line, skip it
if (!stats || stats.length <= 1) continue; // empty line
// The second column has the player name
var playerName = stats[1];
// Check if player exists in map
if (!playerMap.has(playerName)) {
// First time we see the player; Add them in!
playerMap.set(playerName, []);
}
// Get per value for player
var per = parseFloat(stats[9]);
// Add per value to player's array (the next quarter)
playerMap.get(playerName).push(per);
}
Al final de este bucle, tenemos una asignación Map en la que cada jugador dispone de una matriz con sus valores de PER. Con todos los datos de los jugadores en una asignación, podemos empezar a agregar a los jugadores a la aplicación web de modo que estén listos para que el entrenador los saque a jugar.
// Add the players to the bench.
displayPlayerBench();
En resumen, la función processPlayers completa debe tener un aspecto similar al de este código:
// Function to read in all player stats.
function processPlayers(allPlayerStats) {
// Split the data by newline into an array.
var allPlayerStatLines = allPlayerStats.split(/\r\n|\n/);
// Remove the header line (first line)
allPlayerStatLines.shift();
// Loop through the 15 players and create a map entry of player name to player PER
for (var statLine of allPlayerStatLines) {
// Get all individual stat values
var stats = statLine.split(',');
// If it's just an empty line, skip it
if (!stats || stats.length <= 1) continue; // empty line
// The second column has the player name
var playerName = stats[nameIndex];
// check if player exists in map
if (!playerMap.has(playerName)) {
// First time we see the player; Add them in!
playerMap.set(playerName, []);
}
// Get per value for player
var per = parseFloat(stats[perIndex]);
// Add per value to player's array (the next quarter)
playerMap.get(playerName).push(per);
}
// Add the players to the bench.
displayPlayerBench();
}
© 2021 Warner Bros. Ent. Todos los derechos reservados